Немного истории ,перспективы развития языка HTML.

Практически с появлением первых компьютеров возникла проблема передачи информации между ними.И способы были найдены - это различные носители и кабельный способ.Были написаны программы позволяющие передавать и получать данные и , практически сразу , возникла вторая проблема - проблема совместимости т.е. как заставить два и более компьютера , соединенных кабелем , работать в локальной сети .В 1999 году мировая общественность отметила 30-ти летие Intrnet. Официальным днем рождения сети Intrnet считается 2 января 1969 года ,когда Управление перспективных исследований Министерства обороны США ARPA (Advanced Research Project Agency) начало работу над проектом связи оборонных компьютеров.

И только много позже - в 1989 году выпускник Оксфордского университета ,бакалавр в области физики - сотрудник Европейского центра ядерных исследований (CERN) Тим Бернес-Ли разработал и всерьез приступил к созданию информационной службы World Wide Web.Он написал приложение клиент/сервер ( броузер ).В основу всей системы легло понятие гипертекста - т.е. множества отдельных текстов , имеющих ссылки друг на друга.Для работы с этими текстами был создан специальный протокол HTTP - Hyper Text Transfer Protocol были обозначены основные элементы языка разметки HTML.Эта технология дала огромный толчек в развитии сети и сеть стала действительно интернациональной сетью.

Многие коммерческие компании подхватили эту инициативу и стали выпускать свои броузеры - бродилки и к ним свои собственные расширения языка HTML.В 1994 году был образован Консорциум W3C , он был призван навести порядок в области языка HTML , разработав стандарты необходимые для дальнейшего развития World Wide Web.В 1996 году Консорциум W3C обьявлил о сотрудничестве с лидерами рынка для установления стандартов совместимости програмного обеспечения. Была предложена версия HTML 3.2 ,которая стала компромисным решением - попыткой примирить Microsoft и Netscape и обьединить их оригинальные решения в одно целое.

Успех Консорциума W3C оказался спорным ,т.к. компании продолжили придумывать новые расширения к языку HTML и внедрили их поддержку в свои броузеры.Гиганты рынка постоянно пеняют на Консорциум W3C из-за того ,что он является своеобразным тормозом в развитии HTML ,ввиду отсутствия давления на него со стороны пользователей и не спешит принять некоторые их расширения, в то время когда многие WEB-разработчики давно и успешно их применяют на своих страницах. С помощью версии HTML4,0 Консорциум W3C предпринял очередную попытку установить стандарты.

На сегодняшний день перед WEB-мастерами стоит дилема - сиспользовать чистый HTML и достигнуть при этом максимальной читаемости и посещаемости, или пользоваться расширениями и нововведениями ,в ущерб посещаемости создавать интересные эффекты .Для достижения универсальности WEB-разработчики стали разрабатывать свои страницы в двух вариантах и предлагать посетителям право выбора в зависимости от того , каким броузером тот пользуется. Но всвязи с предпринятыми мерами отдела маркетинга фирмы Microsoft, а их броузер Microsoft Internet Explorer теперь бесплатно входит в комплектацию оперативной системы как составная часть Windows '98, становится ясно - что предпочтение их расширениям WEB-мастерами будет отдаваться все чаще и чаще (по некоторым данным их уже сейчас более 80% !).Хотя существует такая прослойка нейтральных пользователей , которые по тем или иным соображениям пользуются броузерами третьих фирм-производителей.

Агрессивная маркетинговая политика компании Microsoft не ограничилась только этим одним ходом .Руководство компании обьявило , что все будущие версии операционной системы Windows будут использовать язык HTML в качестве фундамента интерфейса пользователя . Уже сейчас Microsoft обогнала Netscape в четвертых поколениях их броузеров по количеству поддерживаемых земных языков 98 против 10 ! В планы Microsoft входит также внедрение поддержки интерактивных переговоров и рабочих групп.Тем временем Консорциум W3C обьявил о разработке нового языка XML, который возможно в будущем заменит HTML ,если он окажется эффективнее и удобнее ,а так же будет решено -как быть с теми миллионами уже существующих в Интернете страниц ,написанных с использованием HTML.


Введение к справочному пособию .

Язык HTML развился из стандартного обобщенного языка описания документов SGML и является его производной , созданной для разметки текстовых документов. Существуют разные суждения о том - считать HTML языком программирования или нет.С точки зрения программистов он имеет достаточно простой синтаксис и довольно легок в изучении , но с другой стороны - для простого пользователя иногда постижение языка HTML может представляться затруднительным.

Данное пособие поможет начинающему пользователю в освоении языка HTML и его расширений , а также может послужить on-line справочником для более продвинутых юзеров.Автор надеется , что усвоенный материал поможет Вам шаг за шагом , от начала и до конца создать свою собственную страницу в интернете,WEB-узел или их локальную версию на CD.Не стоит ждать от пособия абсолютно исчерпывающего обьёма информации т.к. язык постоянно обновляется и угнаться за нововведениями в этой области просто не возможно .

Итак ,язык HTML (Hyper Text Marcup Language) - это независимый от платформ язык разметки текста .Документы размеченные при помощи этого языка визуализируются броузерами конечных пользователей в большинстве случаев одинаково , благодаря тому ,что "понимают" и правильно обрабатывают структурные элементы HTML.Исходный код представляет собой текст ,между строк которого вставляются элементы разметки, посетителю страницы эти элементы не видны , а виден результат их воздействия на документ.

Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов - тэгов(tags) и их атрибутов .Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов - есть контейнер.Для удобочитаемости исходного кода некоторые WEB-мастера открывающий тэг пишут заглавными буквами , а закрывающий - маленькими.Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль. После написания исходного кода текстовый файл сохраняется с расширением HTM или HTML .

Существует множество простых и сложных программ для написания страниц HTML.В своей основе все они делятся на две категории : программы автоматизирующие вставку тэгов т.е. редактирующие исходный код и программы ,работающие по методу WYSIWYG (What you see is what you get) - что видишь ,то и получишь,когда WEB-мастер редактирует визуализированный конечный продукт не видя исходного кода .Помимо специальных HTML редакторов, не требующих особого знания синтаксиса языка ,написание документа возможно практически всеми стандартными текстовыми редакторами и процессорами,написанными для любых платформ.

Вопрос состоит лишь в том,насколько профессионально должна выглядеть страница.Для создания динамичных,интерактивных страниц ,включающих в себя массу нестандартных возможностей и имеющих заслуженно высокий рейтинг посещаемости ,необходимость знания языка HTML и основ написания внедряемых сценариев скриптов очевидна.Для упрощения работы по написанию страниц многие авторы используют созданные заранее типовые шаблоны исходных кодов документов.

Далее будут подробно рассмотрены все элементы языка с анализом синтаксиса и примерами исходных кодов .Те фрагменты ,которые должны быть заменены - будут выделены красным цветом . Эти отрывки исходного кода можно просто выделить и вставить в свой исходный код. Пиктограмки [image] и [image] рядом со ссылками означают , что сайт англо-язычный или русско-язычный , соответственно .


Структурные элементы документа HTML

  • Обьявление <!DOCTYPE>.
  • Определение границ документа спомощью элемента <HTML>.
  • Элемент <HEAD>.
    • Создание титула документа с помощью дескриптора <TITLE>
    • Разрешение относительных ссылок с помощью элемента <BASE>
    • Обеспечение поиска при помощи дескриптора <ISINDEX>
    • Взаимосвязь между документами с помощью дескриптора <LINK>
    • Предоставление дополнительной информации о документе с помощью <META>
    • Определение стиля страницы с помощью <STYLE>
  • Элемент <BODY>.
  • Управление цветом.
  • Структурное форматирование.
    • Комментарии <COMMENT >
    • Заголовки <Hn >
    • Разделительные линии <HR >
    • Элемент <P >
    • Элементы <BR > и <NOBR >
    • Элемент <WBR >
    • Элемент <PRE >
    • Элемент <DIV >
    • Элемент <CENTER >
    • Элемент <ADRESS >
    • Элемент <BLOCKQUOTE >
  • Организация в списки .
    • Элемент <OL >
    • Элемент <UL >
    • Элемент <MENU >
    • Элемент <DIR >
    • Элемент <DL >
  • Форматирование символов.
    • Элемент <EM >
    • Элемент <CODE >
    • Элемент <KBD >
    • Элемент <VAR >
    • Элемент <SAMP >
    • Элемент <DFN >
    • Элемент <CITE >
    • Элемент <STRONG >
    • Элемент <I >
    • Элемент <B >
    • Элемент <U >
    • Элемент <STRIKE >
    • Элемент <TT >
    • Элемент <SUP >
    • Элемент <SUB >
    • Элемент <BIG >
    • Элемент <SMALL >
    • Элемент <BLINK >
    • Элемент <FONT >
    • Элемент <BASEFONT >
    • Элемент <ABBR >
    • Элемент <ACRONYM >
    • Элемент <INS >
    • Элемент <DEL >
    • Элемент <Q >
  • Организация ссылок <A >.
  • Вставка в документ объектов .
    • Элемент <IMG>.
    • Элемент <MAP>.
    • Элемент <AREA>.
    • Элемент <BANNER>.
    • Элемент <BGSOUND>.
    • Элемент <MARQUEE>.
    • Элемент <APPLET>.
    • Элемент <SCRIPT>.
    • Элемент <OBJECT>.
    • Элемент <EMBED>.
  • Создание таблиц.
    • Элемент <TABLE>.
    • Элемент <CAPTION>.
    • Элемент <COL>.
    • Элемент <COLGROUP>.
    • Элемент <THEAD>.
    • Элемент <TBODY>.
    • Элемент <TFOOT>.
    • Элемент <TH>.
    • Элемент <TR>.
    • Элемент <TD>.
    • Примеры написания таблиц.
  • Создание форм HTML.
    • Элемент <FORM>.
    • Элемент <INPUT>.
    • Элемент <TEXTAREA>.
    • Элемент <SELECT>.
    • Элемент <ISINDEX>.
    • Элемент <OPTION>.
    • Элемент <OPTGROUP>.
    • Элемент <BUTTON>.
    • Элемент <LABEL>.
    • Элемент <FIELDSET>.
    • Элемент <LEGEND>.
  • Создание таблиц стилей HTML.
    • Включенные таблицы стилей
    • Внедренные таблицы стилей
    • Внешние таблицы стилей
    • Атрибуты стиля
    • Назначение классов
    • Примеры исходных кодов
  • Создание документа с помощью кадров и уровней
    • Элемент <FRAMESET>
    • Элемент <FRAME>
    • Элемент <IFRAME>
    • Примеры простейших макетов страниц с фреймами .


Практические советы по созданию Web-страниц.

 На стартовую

Практические советы по созданию Web-страниц.

  • Форма и содержание ,первый шаг.
  • Организация страниц в узлы ,навигация.
  • Тестирование.
  • Обратная связь.
  • Обновление содержимого страниц.
  • Оптимизация графики используемой на сайте .
  • Выбор места для размещения Web-страниц .
  • Выбор доменного имени и имени сайта.

Форма и содержание , первый шаг.

Прежде чем приступать к написанию Web-документа и размещению его в сети Internet , необходимо определиться в главном - каково его основное предназначение и на какую аудиторию он расчитан. Либо это Ваша стартовая страница - путеводитель , на которой собраны сылки на различные ресурсы Интернета ,а может это чей-нибудь курсовой проект в институте ,показательно выставленный на всеобщее обозрение или сайт фирмы занимающейся продажами в сети каких-либо программ и товаров .Исходя из этого и опираясь на имеющийся в Вашем распоряжении материал Вам будет намного легче работать и создавать Web-страницу.Сказать точно сколько в сети имеется страниц - не реально, но по контенту т.е.своему содержанию большинство из них можно как-то классифицировать.Кроме того любую страницу можно оценить по двум параметрам : по контенту и по внешнему виду.

Собственно с этого и надо начинать - разработайте сами , или поручите это профессионалу , дизайн-концепцию будущей страницы : т.е. выберите название ,шрифты,фон ,цветовое оформление деталей страницы и набросайте несколько её эскизов.После того как Ваш выбор падёт на одном из вариантов приступайте к структуризации информации : скомпонуйте её по основным разделам , продумайте в рабочем варианте - как должно выглядеть структурное дерево документа и разбейте ,согласно ему ,имеющийся материал на разделы .Обратите Ваше внимание на то ,как эти задчи решили другие ,но остерегайтесь явного заимствования идей , соблюдайте авторские права , уважайте чужой труд .

Помните о проблеме использования различного рода расширений к языку HTML и нововведений.Зделайте свой выбор :использовать стандартный чистый HTML - тем самым обеспечив нормальное отображение Вашего сайта всеми браузерами или же применять новые методы и решения ,заведомо лишившись части аудитории. Посетите приведенные ниже страницы - там Вы сможете попытаться создать для своего сайта красивое LOGO

http://www.cooltext.net
http://www.zyris.com/zygraphics
http://www.angelfire.com/me/physc0/enterlogo.html

Организация страниц в узлы ,навигация

При создании достаточно больших документов надо помнить о том ,что не все из посетителей имеют высокоскоростной доступ в Интернет .У большинства модемный коннект , где скорость передачи данных 2-3 kB в секунду не считается плохой.Сосчитайте суммарый "вес" Вашего документа и всех размещенных в нем изображении , а также подгружаемых звуков и оцените как долго он будет грузиться .Большинство потенциальных посетителей прервут загрузку страницы из соображений экономии средств ,если она будет грузиться дольше 30-40 секунд .Поэтому оптимальным решением в таком случае будет - разбить документ по разделам на отдельные страницы, исполнить их в том же стиле и организовать навигацию между ними при помощи ссылок .Это позволит Вам разместить гораздо больше графического материала чем раньше и существенно облегчит посетителю поиск именно той информации, какая его интересует.

Создайте шаблон-заготовку страницы с основными структурными тэгами и меняйте только содержимое и адресацию ссылок. Помните ,что посетитель может попасть на прямую на любую из ваших страниц - и важно показать ему ,что эта страница является частью целого узла ,дать ему возможность перейти по ссылке на главную страницу и просмотреть остальные разделы. В этом случае стартовая страница должна иметь информацию о структуре узла , ввиде интуитивно понятного навигационного меню , некоторые разработчики очень успешно осуществляют навигацию по узлу при помощи фреймов,когда в одном из фреймов располагаются ссылки , а в других появляются вызванные по ним страницы.

Нарисуйте на бумаге схему Вашего узла ,обозначте стрелками связи по ссылкам между ними и подумайте о том - легко ли будет ориентироваться посетителю во всех этих переходах, не заблудится ли он в Вашем лабиринте.Замечено что ориентироваться в дереве разветвлений с глубиной проникновения более чем на три уровня становится очень сложно , ведь посетитель заходя на ваш узел , ориентируется в его структуре как если бы ,например, он действительно бродил по огромному зданию , с его этажами ,коридорами и комнатами.

При такой организации Web-документа отдельные его страницы даже могут физически находиться на совершенно удаленных друг от друга серверах , хотя если один из серверов окажется вдруг недоступен по какой-либо из причин ,то соответственно часть Вашего документа посетители не увидят.

Тестирование

Проведите тестирование Вашей страницы сами и попросите это сделать друзей и знакомых.Спросите их мнение и Вы наверняка услышите много полезного и объективного.Проверте как отображается узел в Вашем любимом браузере , а также не будет лишним посмотреть его в других браузерах.Проверьте все до единой ссылки на работоспособность ,спросите у друзей - понятно ли им в принципе что это ссылки.Просмотрите сайт на разных компьютерах с различными пользовательскими настройками кодировок ,а также на мониторах с различным разрешением и диагональю.

Засеките и проанализируйте время загрузки стартовой страницы ,удалите все комментарии в исходном коде , так как они дают Вашему сайту лишние байты и иногда приводят к некорректной работе некоторых броузеров.Например браузеры ранних версий не могут распознать многострочные комментарии , а в закрывающем символе комментария " - -> " двойной минус понимается как ошибочный оператор Java Script , так же начинающийся с этого символа.

Проверьте везде ли , где имеется ссылка на громоздкий файл изображения или мультимедийную вставку , в скобках указана информация о его размере .Некоторые посетители намеренно отключают у себя в настройках браузера возможность загрузки изображений , а посему - если Ваши ссылки оформлены ввиде графических изображений , то вставте в них альтернативный текст с пояснениями куда ведет ссылка.

Проверьте Ваш сайт на предмет читабельности : хорошо ли виден текст на данном фоне ,разбит ли он на абзацы ,не слишком ли пестрит и рябит в глазах от всевозможной анимации , все ли тэги закрыты и правильно ли отображается шрифт и если использование конкретного шрифта не продиктованно соображениями дизайна , то лучше использовать шрифт по умолчанию .Предоставте посетителю возможность отключить фоновые звуки и проверьте правописание.

Обратная связь .

В процессе ознакомления с материалами Вашего сайта у посетителей может возникнуть к Вам ряд вопросов по существу освещаемых вопросов,предложений и просто пожеланий.Это может быть кто угодно - Ваш оппонент предлагающий развернуть дискуссию ,клиент Вашей фирмы , который так и не смог разобраться с механизмом оплаты товара или Web-мастер сайта с подобным контентом изъявил желание обменяться с Вами баннерами. Разместите на своем сайте ссылку на адрес электронной почты для обратной связи.

Синтаксис:<A href="mailto:webmaster@domen.ru?Subject=E-mail to Web-master"> E-mail to Web-master. </A >.

В этом случае при клике на ссылку у посетителя запустится программа почтовый клиент ,например :Outlook Express в которой автоматически подставится указанный Вами адрес.

Пример: E-mail to Web-master.

Или при помощи картинки :

Синтаксис:<A href="mailto:webmaster@domen.ru?Subject=E-mail to Web-master"> <img src="mail.gif"> </A >.

Пример :

Выделите для удобства под сообщения с Вашего сайта отдельный почтовый ящик , чтобы не путать их с остальной почтой и в целях предосторожности - в случае если к Вам на e-mail посыпется SPAM - Вы легко сможете сменить почтовый адрес. Это можно сделать здесь :

http://chat.ru | http://coolmail.to
http://www.e-mail.dux.ru | http://www.alloymail.com
http://www.az.ru | http://yandex.narod.ru
http://www.forfree.at | http://www.mail.ru
http://www.crosswinds.net | http://www.gnwmail.com
http://www.softhome.net | http://www.rocketmail.com
http://www.bigfoot.com | http://www.mailcity.com
http://www.hotmail.com | http://mail.yahoo.com
http://www.iname.com | http://www.geocities.com

Реагируйте на критику и замечания присылаемые Вам от посетителей сайта ,не пытайтесь вступать с ними в полемику,из их субъективных мнений складывается объективная оценка Вашему сайту - прислушайтесь к их мнению.Очень часто Web-мастера размещают на своём сайте гостевую книгу - это делает общедоступными все отзывы и предложения.Для реализации такой формы обратной связи прибегают к помощи CGI скриптов расположенных на сервере и обробатывающих текст , вводимый посетителем в полях формы и затем отображающих текст сообщения непосредственно на этой странице. По такому же принципу можно организовать пересылку сообщений по указанному E-mail адресу ,не прибегая к использованию почтового клиента Outlook Express. Для этого воспользуйтесь бесплатным удобным и легко настраиваемым формоотправителем , который находится здесь :

http://www.webclub.ru/free/sendform

Чтобы обзавестись гостевой книгой - сходите сюда :

http://www.guestbook.ru | http://www.guestworld.com
http://www.bravnet.com | http://www.tealnet.com
http://www.glacierweb.com | http://www.dreambook.com
http://www.guestbook.de | http://www.webpromote.net/guestbooks
http://www.freeguestbooks.com | http://www.guestpage.com

Чтобы обзавестись чатом - сходите сюда :

http://www.parachat.com | http://www.starvoice.com/chatroom/free/
http://www.xoom.com/chat/ | http://www.sneakerchat.com
http://www.chatplanet.com/license.html | http://www.beseen.com/chat/freechat.html

Доски объявлений можно получить здесь :

http://www.cgiforme.com | http://www.beseen.com
http://www.bravenet.com | http://www.insidetheweb.com/messageboard/
http://www.boardhost.com |

Обновление содержимого страниц .

Представте себе такую ситуацию , когда Вы были бы вынуждены читать одну и ту же книгу , газету или журнал постоянно изо дня в день.Так вот - Ваш сайт рискует потерять посетителей ,если каждый раз заходя на него они не увидят там ничего нового. Нет предела совершенству , еще далеко не все Вами сказано .Совершенствуйте свой сайт , обновляйте его контент , выносите в отдельные разделы новшества или ссылки на них , выделяйте значками или цветом текста информацию о новшествах и о дате предыдущего и будущих обновлений.Некоторые информационные сайты новостей практикуют это ежедневно , а иногда и ежечасно и пользуются заслуженной популярностью ,но такой стиль работы требует много рабочего времени и материала .Начните стого , что разместите сначала 40 % информации и дополняйте сайт частями с пометкой продолжение следует - это позволит Вам надеяться на то ,что посетитель придет на сайт снова.

Оптимизация графики используемой на сайте .

Взвесив все ЗА и ПРОТИВ использования на страницах Вашего Web-узла графических изображений Вы ,скорее всего , решитесь на её использование.Для работы с изображениями в WWW используют два основных формата : JPEG ( Joint Photographic Experts Group - объединенная группа экспертов фотографии ) и GIF , ( Graphical Interchange Format - графический обменный формат ) реже используют специально созданный формат PNG ( Portable Network Graphics - переносимая сетевая графика )

Формат GIF позволяет создавать изображения не более чем с 256 цветами и использует алгоритм сжатия без потерь качества исходного изображения , кроме того он позволяет конструировать анимационные графические файлы.Этот формат в основном используют для создания баннеров - анимационных картинок или картинок ,на которых присутствует текст. Анимация создается по простому принципу : сначала создаются несколько картинок-кадров , задается их очередность , частота обновления кадров в секундах и количество повторений , а после они связываются в один файл с расширением .gif , причем размер такого файла часто меньше суммы размеров , входящих в него изображений . Такая экономия достигается при оптимизации анимации , когда одинаковые во всех изображениях участки запоминаются как один статический .

Например :

JPEG файлы позволяют отображать до 16 миллионов цветов при сравнительно небольшом их размере.Однако использование более сильного сжатия файлов приводит к существенному ухудшению их качества.Этот формат в основном используют для создания фотографических изображений.

Для оптимизации т.е. уменьшения размеров графических файлов пользуются различными программами-оптимизаторами умеющими работать с форматами GIF и JPEG.Над созданием таких программ трудятся такие известные компании как Adobe и Ulead ,и конечно еще масса менее известных разработчиков. В наборе инструментов практически каждого Web-дизайнера есть программы этих компаний .

Для работы с GIF-изображениями подойдет программа Gif Construction Set с которой можно познакомиться на сайте компании
http://www.mindworkshop.com
, Embelish с которой можно познакомиться на сайте компании
http://www.dadaware.com
, или Ulead GIF Animator с которой можно познакомиться на сайте компании
http://www.ulead.com
.Последняя программа ,например , позволяет создавать простую анимацию и жать GIF-файлы иногда практически вдвое . Сравните качество и размеры ниже расположенных баннеров :

 | - до оптимизации |  | - после оптимизации
1.666 kB |  | 595 B |

Для работы с JPG-изображениями подойдет программа Ulead Smart Saver Pro с которой можно познакомиться на сайте компании
http://www.ulead.com
,а так же безусловный лидер в области редактирования изображений ,специально улучшенная для создания оптимизированных Web-изображений программа Adobe Photoshop v 5.5 с которой можно познакомиться на сайте компании
http://www.adobe.com
.Программа позволяет варьировать качество изображения изменяя степень сжатия файлов .Как один из способов оптимизации крупных JPG-изображений можно предложить разрезать файл на мелкие части оптимизировать их по отдельности , а потом собрать в одно целое при помощи таблицы.Секрет метода прост - некоторые участки JPG-изображений с плавными переходами цвета не могут быть оптимизированны без заметного ухудшения качества - их предлагается сжимать не сильно.

Выбор места для размещения Web-страниц .

Вариантов для размещения Web-страниц на самом деле довольно много.Если Ваш сайт представляет собой коммерческий проект то лучше всего Вам обзавестись собственным сервером и высоко-скоростным выходом в сеть , либо арендовать место у компаний могущих обеспечить вас всем необходимым .А если это проект поскромнее, то тут всё немного проще . Можно найти в сети огромное количество ссылок на free web pages ,даже некоторые провайдеры предоставляют своим клиентам бесплатное место под страницу.

http://narod.ru | http://www.az.ru
http://chat.ru | http://www.halyava.ru
http://www.newmail.ru | http://i-connect.ru
http://www.agava.ru | http://www.lgg.ru
http://www.fortunecity.com | http://www.netcity.ru
http://www.freeserwers.com | http://www.hotmail.ru
http://www.geocities.com | http://www.ussr.to
http://www.spree.com | http://www.viaduk.net
http://www.tripod.com | http://home.vibor.ru
http://www.xoom.com | http://windoms.sitek.net
http://www.bizland.com | http://www.intergrad.com
http://www.fsn.net | http://hosting.agava.ru
http://www.crosswinds.net | http://www.dp.ru
http://www.virtualave.net | http://www.artnet.ru/generator

Однако для того чтобы выбрать окончательно необходимо обратить внимание на следующие пункты.

  • Отсутствие дискриминации по контенту.Некоторые сервера ставят условия ,касающиеся содержимого Вашего сайта.
  • Надежность Web-сервера .Посетите их Web-узел в пиковые часы и убедитесь ,что проблем с доступом не возникает.
  • Отсутствие скрытых завуалированных видов оплаты места ввиде всевозможных доплат за различные услуги и рекламы.
  • Техническая поддержка.Предоставлят ли Вам возможность общения с администратором сервера,есть ли возможность доступа по протоколу FTP ( File Transfer Protocol ) , и т.д.
  • Объем выделяемого Вам пространства.Обычно это 2-5 мегабайта .
  • Дополнительные возможности.Не будет лишним ,если сервер предложит Вам :бесплатную почту ,счетчик посещений ,гостевую книгу ,чат,различные CGI-скрипты и т.д.
  • Какое програмное обеспечение установлено на сервере.Например UNIX-сервера чувствительны к регистру букв в названиях файлов т.е. если у Вас в исходном коде будет стоять ссылка на файл background.gif , а файл будет назван background.Gif или Background.gif , то он не будет визуализирован.Однако у таких серверов более высокая степень защищенности от взломов.

Выбор доменного имени и имени сайта.

В сети каждый компьютер имеет свой уникальный адрес, который может быть представлен как последовательностью четырех целых чисел от 0 до 256 ,разделенных между собой точкой ,так и именем. В Интернете используется многоуровневая так называемая доменная система имен или URL - Universal Resource Locator .Каждый уровень называется доменом.Домены разделяются точками .Чем выше доменный уровень тем правее он стоит в имени.Обычно домен верхнего уровня обозначает страну ,где расположен сервер т.е. ru-Россия ,uа-Украина ,de-Германия , fr-Франция , а кроме того различные организации com-коммерческие , net-сетевые , org-прочие .

Синтаксис : http :// www . отдел . компания . ru

Большинство компаний имеют свой именной домен даже не зная точно - можно угадать ,что если она носит имя InterNic , то скорее всего это будет www.internic.com или www.internic.net , где www означает тип информации .Таким образом если Вы желаете чтобы Ваш сайт можно было быстро найти , то обратитесь в одну из организаций ,занимающуюся проверкой и выдачей адресов в сети .

Например :
http://www.internic.net

Или :
http://www.ripn.net/nic
- для Российской зоны ru .

Проверте - не зарегистрирован ли уже под этим именем какой-либо сайт , заполните предложенную форму и оплатите указанную сумму . Если Ваш сайт несет в себе информацию коммерческой напрвленности , то наличие собственного , легко запоминающегося доменного имени , с точки зрения рекламы , принесет ему ощутимую пользу . А если Вы по какой - либо из причин не зарегестрировали домен - то постарайтесь по крайней мере не давать сайту длинное , трудно запоминающееся имя .

На стартовую

Наверх


Практическое руководство по раскрутке сайта.

 На стартовую

Практическое руководство по раскрутке сайта.

Среди начинающих создателей Web-сайтов бытует ошибочное мнение ,что достаточно написать и отладить исходный код страницы и разместить ее на сервере , как тотчас его начнут посещать посетители. Увы - это не так .Самой распространенной причиной провала большого числа многообещающих проектов в Интернете является недостаток посетителей.И даже среди оставшейся более удачливой части владельцев абсолютное большинство желало бы количество своих посетителей увеличить.

Мы не будем рассматривать определенную часть сайтов ,предназначеную для узкого круга пользователей ,чаще всего они имеют доступ по паролю или их создают для персонального использования. Речь пойдет о тех владельцах , чей успех и заработок напрямую связан с числом посетителей. Создание Вами Web-сайта само по себе не является событием такого масштаба чтобы это могло заинтересовать ту многочисленную аудиторию , которая ежедневно бродит в сети .Возьмите себе на заметку несколько тезисов ,которые помогут Вам определить направление дальнейшего продвижения.

  • Ваши посетители о Вас не знают.
  • Узнав о Вас посетители к Вам не придут .
  • Придя к Вам на сайт ,они не совершат задуманных Вами действий или покупок .Или совершат , но обидно мало.
  • Уйдя с Вашего сайта - они не вернутся обратно .

А поступают они таким образом в силу целого ряда причин , устранить которые Вы можете . Начните с первого - займитесь активной раскруткой Вашего проекта. Тут , как говорится, все методы хороши ,кроме откровенного СПАМа .Вы можете напечатать визитных карточек и раздать их знакомым , Вы можете в конце каждого письма , отправляемого по e-mail ставить подпись с указанием URL вашего сайта , Вы можете опубликовать в средствах массовой информации , наконец , объявление о том ,что открыли сайт.Кроме того Вы можете абсолютно бесплатно рекламировать свой сайт в многочисленных досках объявлений.Учавствовать в тематических обсуждениях и там , обсуждая тему ссылаться на Ваш сайт. Это хотя и бесплатные но эффективные методы , которые могут принести Вашему сайту дополнительных посетителей.
Адреса некоторых бесплатных досок объявлений :

http://www.holiday.ru/boards | http://www.rudata.ru
http://www.adwin.ru/bbs/ | http://www.do.ru
http://www.direct.spb.ru | http://www.oryol.ru/spros.htm
http://www.markets.ru | http://wall.tms.ru

Многие владельцы страниц используют прием , который как и в реальной жизни практически всегда приносит свои плоды . Давно уже ни у кого не вызывает сомнения тот факт , что несколько близлежащих магазинов в конгломерате всегда работают эффективнее , чем порознь . Покупатель , пришедший в один магазин обязательно посетит второй и третий и т.д. - происходит взаимовыгодный обмен клиентами .

Точно по такому же принципу в сети владельцы сайтов обмениваются ссылками друг на друга. Это могут быть статические или анимированные графические изображения стандартных размеров - баннеры , при клике на которые посетитель переадресуется на рекламируемый сайт , или может быть простая текстовая ссылка - в зависимости от договоренности.Таким образом посетитель купивший у Вас карандаш узнает о другом сайте , где ему предложат точилку или тетрадь , и , соответственно наоборот. Даже в том случае , если Вам поступило предложение обменяться ссылками с сайтом-конкурентом тем не менее не отказывайтесь поделиться с ним клиентами , а он в свою очередь поделится с Вами своими , ведь его клиенты быть может никогда и не узнали бы о Вас. Если Вы не располагаете прграммным обеспечением для создания баннеров то на этих сайтах Вы сможете это сделать :

http://coder.com/creations/banner
http://www.updev.com/banners
http://www.crecon.com/banners.html
http://mediabuilder.com/abm.html

Так же баннерный обмен может быть платным , по простому принципу : если Ваш сайт начинающий мало известный и плохо посещается то при обмене баннером платите Вы . И на оборот , если Вы являетесь владельцем крупного популярного Web-узла то при обмене ссылками доплатят Вам . В сети можно найти различные баннерные рекламные службы , которые предложат Вам для раскрутки сайта учавствовать в их баннерном обмене , оплатой в данном случае будет количество показов , например : за десять показов Вашего баннера Вы показываете пятнадцать других .

http://banner.ricor.ru | http://www.bannerpoint.ru
http://www.ir.ru | http://www.reclama.net/banners
http://click.ipc.ru | http://www.tree.ru
http://win.copirs.com/banner/default.ru.html | http://www.promote.ru
http://www.reklama.ru | http://www.linkexchange.ru
http://www.flamingo2.ru | http://tx3.design.ru

Но наиболее эффективной будет Ваша реклама в самой сети посредством занесения URL Вашего сайта и всяких сведений о нем в различные сетевые WWW-каталоги ,указатели ,списки , рекламные службы , рейтинговые таблицы и т.д. На самом деле строго их классифицировать довольно трудно так ,как все чаще и чаще они начинают предоставлять различные услуги и выполнять функции ранее им не свойственные. Объединяет их то ,что все они представляют из себя по-разному организованные списки URL-адресов различных Web-сайтов и ссылок на них сгруппированых по какому-либо признаку .

Чем больше будут эти списки,тем больше будет вероятность того , что посетитель найдет в них именно то , что его интересует, и как следствие - выше будет популярность этих служб . Практически у абсолютного большинства каталогов предусмотрена возможность добавления посетителями URL-адреса автоматически ,либо по e-mail с предварительной проверкой и классификацией администратором.Часто на сайте каталога организуют поиск в базе данных по словам или категориям , а также различные рейтинги популярности .Справедливости ради , надо отметить что система рейтингов - двольно удачное решение .Судите сами - по Вашему запросу солидный каталог иногда может выдать не одну сотню ссылок , большая часть которых на Вашем экране не будет видна , и как следствие - те ссылки , которые находятся на первой странице отчета и будут самыми посещаемыми в данной категории .

В рейтингах ведется статистика посещаемости сайтов и уже согласно ей страницы и занимают свои места в категориях - чем качественнее сайт , тем он популярнее и ,а значит и рейтинг его высок.И в то же время - чем выше рейтинг тем больше вероятность что его найдут по запросу , и тем , соответственно будет сайт популярнее.Вот в этот замкнутый круг Вам предстоит пробиваться , чтобы занять в нем достойное место , а главное удержать свои позиции среди многочисленных сайтов с похожим контентом.

Суть регистрации заключается в следующем :Вы заполняете предложеную форму , где указываете все , что считаете нужным сообщить потенциальному посетителю о своем сайте . Скорее всего , Вам предложат разместить у себя на сайте их баннер , счетчик посетителей , подписаться на их рассылку и еще могут предложить разместить форму для проведения голосования за Ваш сайт в этом рейтинге ,для этого вы получите часть кода , который надо будет вставить в свой исходный код.

Займитесь этой кропотливой работой и результат не заставит себя ждать .Предварительно составте список ключевых слов , по которым Вы думаете Ваш сайт будут искать . Какие именно ключевые слова подобрать - решать Вам , главное чтобы это были описательные слова , отражающие содержание и реально присутствовали в Вашем тексте.Помните что большинство посетителей будут узнавать о Вашем сайте именно на таких вот серверах. Отнеситесь очень ответственно к подбору ключевых слов , опросите знакомых по каким словам они стали бы искать сайт с таким-то содержанием , ведь именно по этим словам Ваши посетители о Вас узнают .

Придумайте краткое но содержательное описание сайта . В отчете о найденных ссылках рядом с Вашей будет показан этот текст , он должен выгодно отличаться от остальных .Посетите несколько сайтов с каталогами и посмотрите как это удалось тем сайтам , которые находятся в верхней части списков . Делайте анализ , не повторяйте чужих ошибок и старайтесь не делать собственных.Это описание будет Вашей визитной карточкой , той одежкой , по которой Вас встречают , благодаря которой Ваши посетители к Вам придут . Для того чтобы пройти регистрацию воспользуйтесь регистратурой .

Регистрируя свой сайт Вы иногда будете узнавать о том , что он в том или ином каталоге уже есть - не удивляйтесь .На таких серверах имеются программы - поисковые роботы , они производят поиск информации в тысячах Web-узлах , еще их часто называют Web-spiders - пауки .Для того чтобы иметь всю необходимую информацию о той или иной странице поисковому роботу совсем необязательно загружать ее - ему достаточно той ее части , которая заключена в тэги служебного пользования - <HEAD> и </HEAD> .

Пауки считывают информацию прописанную в META-тэгах и часто проверяют соответствие этой информации действительности , т.е. чем чаще на сайте встречаются слова , указанные как keywords-ключевые , тем больше вероятность ,что робот их не проигнорирует. Также поисковые сервера проверяют ссылки на Вашей странице и если какая-то из них почему-то не работает , то часть Вашего сайта может остаться не проиндексированной.Особое внимание пауки уделяют той информации , которая помещена в тэги :<TITLE> и </TITLE> , <Hn> и </Hn> , <B> и </B> .

Не стоит , наверное , говорить о том как важно для владельца сайта - правильно предоставить паукам информацию в META-тэгах . Для того , чтобы вернуться к этому по-подробнее кликните здесь или воспользуйтесь формой-генератором META-тэгов . Для регистрации сайта можно пойти по пути наименьшего сопротивления - воспользоваться услугами различных служб , в которых надо сначала заполнить форму , а после они сами добавляют Ваш сайт в многочисленные каталоги . Их услуги бывают платными и бесплатными .

http://road-to-riches.com/addalink2.html
http://www.123launch.com/
http://hbb.nu/freesubmit/
http://www.addme.com/

Минусы в таком способе тоже есть - как правило после регистрации Вы начинаете получать бесчисленные сообщения о регистрации , новости всевозможных служб рассылки , ну и конечно различный SPAM.Поэтому e-mail-адрес для этих целей заведите отдельный или вовсе не указывайте . Если Ваш сайт коммерческий и Вы готовы потратить на его раскрутку определенную сумму денег , то воспользуйтесь платной регистрацией - это даст более ощутимый результат т.к. часто Ваш сайт будет не просто внесен в каталоги , а еще и в придачу Вы сможете получить определенное количество показов вашего баннера на сайте этих серверов .

После того как Вы активно предпримете все предложенные методы раскрутки - количество посетителей Вашего сайта неуклонно начнет расти и со временем число ежедневных посетителей достигнет определенной планки , но совсем не факт что на этой отметке оно и остановится .Какая-то часть посетителей , не вернется к Вам на сайт после первых посещений, поэтому число их начнет медленно падать пока Вы не останетесь со своей аудиторией . Диаграмма , расположенная ниже , наглядно демонстрирует как происходит изменение посещаемости . Очевидно что пик ее соответствует периоду наиболее активной рекламной кампании .

Прирост числа посетителей.

Установите у себя на сайте счетчик посещений и ведите свою статистику - это поможет Вам отслеживать действенность рекламы. Счетчик Вам наверняка предложат на сервере , где будет расположен Ваш сайт или во многих поисковых серверах и каталогах . Иногда в месте со счетчиком Вам предлагают сложную статистику посещения Вашего сайта , вплоть до подсчета посещений каждой из страниц узла .
http://u227.69.spylog.com
Это очень удобная и подробная статистика , достойная Вашего внимания .

Если , при регистрации в каталогах , Вы вдруг не захотите ставить их счетчики , то последние можно получить здесь :

http://www.freecounter.com
http://beseen.com/beseen/free/counters.html
http://www.worldwidemart.com/scripts/counter.shtml
http://www.icount.com
http://www.fastcounter.com

И снова не от кого-то , а от Вас будет зависеть то как сильно опустится кривая посещаемости вниз после прохождения своего пика .Есть масса способов , действенных и не очень , как дезинформировать поисковый сервер но одно остается за педелами возможного - обмануть посетителя . Если ему не понравится сайт - он его вряд ли посетит снова . Оцените Ваш сайт с точки зрения контентного содержания сами , а лучше спросите у третьих лиц на сколько он показался им занятным . Вы должны ясно себе представлять на кого расчитан сайт и ставить перед собой реальные цели .

Улучшайте содержимое и внешний вид сайта , делайте его более интерактивным .Отвечайте на письма с вопросами и предложениями , правильно реагируйте на критику.Уменьшайте скорость загрузки начальной страницы всеми способами , разместите на нем гостевую книгу , формы для отправки сообщений , голосования , поиска и т.д. после того как реальная посещаемость достигнет не менее пятидесяти посетителей в день можно разместить на сайте чат . Важно создать у клиента впечатление , что он пришел не просто почитать текст , а пообщаться интерактивно и получить другие удовольствия.

Продумайте возможность расширения потенциальной аудитории за счет размещения дополнительной информации . Например если Ваш сайт рассказывает о фирме , производящей пиво определенной марки и кроме клиентов и поставщиков никто на него не заходит , то стоит подумать об открытии раздела Всё о пиве ! и разместить в нем все , начиная с истории пивоварения и того какие сорта пива бывают и чем они полезны , и заканчивая анекдотами о пиве , коллекцией этикеток, чатом , клубом с рассылками ,или тематическим форумом . Смею заверить - число посетителей сразу вырастет , и значительно .

Предлагайте посетителям занести URL-адрес Вашего сайта в папку избранное пример 1 [image] или пример 2 и переслать [image] ссылку знакомым, а также во всех ссылках на другие сайты пропишите открытие в новом окне - иначе посетитель , уйдя от вас заблудится и уже вернуться будет сложнее .
Например :
<A HREF="URL" target="_blank">Ссылка</A>

Все эти меры в совокупности дадут Вам ощутимый результат - посетителям полюбится Ваш сайт и они вернутся обратно снова и снова.

Было бы не правильно предполагать , что если сайт создан и размещен в сети , то это значит что он работает как было задуманно . К сожалению это не всегда подтверждается - посетители уходят с сайта так и не заполнив какой бы то ни было из форм , не проголосовав, или не купив какого-либо товара. Многие владельцы сайтов закрывают свои неудачные проекты так как они не принесли им того , на что они расчитывали при создании страницы . Почему это происходит или , вернее ,почему не происходит обратного - однозначно ответить нельзя , но давайте рассмотрим некоторые ошибки , которых мохно избежать .

Когда автор создает сайт он ясно себе представляет - что и зачем он размещает на нем , чего нельзя сказать о посетителе т. к. тот заходит на сайт впервые . Тут зачастую кроится осовной подвох - бывают сайты , зайдя на которые у посетителя не складывается даже общего представления о том для чего страница , собственно предназначается . Полнейший хаос , сплошная мешанина , ничего не разобрать - чаще это сайты где Web-мастера стараются показать все , на что они способны . Важно чтобы с первого взгляда было понятно что это ,например магазин по продаже компакт дисков,а не личный сайт любителя эстрады .

В некоторых каталогах , например , можно найти все - рейтинги ,курсы валют , новости политики , анекдоты , обзор прессы , отправители сообщений на пейджер, статьи и пр., конечно же рекламу , а то , зачем пришел посетитель ( добавить свой URL ) придется поискать где-нибудь в уголке , маленьким шрифтом , а иногда сначала надо перейти в подуровень и т.д. . А ведь посетители это не только те , кто ищет , а еще и те кто для них пишет. Часто переход по ссылке замаскирован ввиде картинки безо всякого альтернативного текста или пояснения .

Другие могут долго описывать достоинства своей команды в разделе about , а на простое разьяснение для клиента для кого именно предназначается их товар слов , видимо ,не хватает .Или все прекрасно и понятно , а четких инструкций относительно того , как покупатель должен действовать в случае , если он захотел купить товар , проще говоря - какие кнопки нажимать . Мы же не можем требовать от каждого посетителя досконального знания всех особенностей сети , не обязан он знать заранее без всякого пояснения, что изображение корзинки в углу экрана - это то место , где он может предварительно увидеть перечень уже заказанных им товаров.

Наверняка Вам самим многое не понравилось в различных уголках Интернета .Любой из нас , в принципе , умеет пользоваться телефоном , потому что абсолютное большинство из них работают по одним и тем же инструкциям . И где бы мы ни находились - в любой из стран , мы сможем выполнить то , для чего телефон предназначается - позвонить . То же самое можно с полной уверенностью сказать и про магазины с ресторанами - потому что всем все ясно . Но опять , ксожалению в сети так много всего нового и работает все так по-разному , что четкие инструкции нам просто необходимы.

Просмотрите еще раз страницы Вашего узла , поросите это сделать тех , кто с Интернетом знаком лишь по-наслышке ,уделите внимание всем тонкостям и мелочам . Реагируйте на их замечания , не старайтесь объяснить - как это работает , а постарайтесь сделать так , чтобы понятно стало без устных объяснений .Разработайте сценарий по которому посетитель должен действовать на Вашем сайте , напишите инструкции ,максимально упростите процедуры , расставте указатели и поясните каждое из действий - даже очевидное .На редких сайтах , но можно встретить интересное решение проблем посетителей - обычный чат перенастроенный как комната вопросов к администратору узла в on-line режиме .Сделайте все для того , чтобы посетителям было удобно и приятно посещать Ваш сайт и они совершат покупки.

На стартовую
Наверх


Баннер .

Разместите баннер у себя на сайте.

Если Вы оказались довольны содержимым этого сайта и сочтёте возможным разместить у себя на странице анимированный баннер - скопируйте приведенный ниже исходный код и вставте его в какую-либо часть своего исходника. Баннер имеет стандартный размер 88x31 пиксель и "весит" - 2,6 килобайт.

<!--begin of dimas code//-->
<a href="http://www.arcus.lv/dimas" target="_top">
<img src="http://www.arcus.lv/dimas/banner1.gif"
alt="Учебник HTML" width=88 height=31 border=0>
</a>
<!--end of dimas code//-->


Проблема чистоты языка HTML.

Стремительное развитие WWW ,в результате острой конкуренции между компаниями производителями програмного обеспечения сети и достаточнная инертность Консорциума W3C в деле стандартизации языка HTML , привели к ситуации , когда перед создателями Web-сайтов встает важнейший вопрос - использовать чистый HTML и достигнуть при этом максимальной читаемости и посещаемости, или пользоваться расширениями и нововведениями ,в ущерб посещаемости создавать интересные эффекты .

Поскольку стандартный - чистый HTML не предоставляет необходимые функциональные возможности , компании производители броузеров самостоятельно внедряют в язык HTML различные расширения и обеспечивают их поддержку в новых версиях своих приложений . Конкуренты же стараются ответить адекватными действиями - во первых стараются обеспечивать поддержку чужих расширений , во-вторых создают свои новые функции .

Периодически компании производители подают заявку с описанием синтаксиса нового элемента на рассмотрение и принятие его в число стандартных элементов . В то же самое время Консорциум W3C занял выжидательную позицию и не слишком торопится с рассмотрением и принятием новых тэгов . На практике происходит следущее : расширения живут собственной жизнью - одни из них не приживаются и естественным образом покидают список претендентов на стандартизацию (<BGSOUND> , <IMG dynsrc="...">....) , вторые наоборот становятся очень популярными (<FRAME> , <HR size="..."> , <FONT size="..."> , <IMG align="..."> ....) и в последствии становятся стандартными, третьи же , уже однажды внесенные в стандартный - чистый HTML , становятся нежелательными (<U> , <S> , <BASEFONT> , <STRIKE> , <ISINDEX> , <DIR> , <CENTER>....) т.к. на смену им приняты более эффективные .

В этой связи необходимо заметить , что использование чистого HTML имеет существенное преимущество ,т.к. его использование гарантирует всестороннюю поддержку всеми возможными броузерами любого из стандартных элементов языка HTML , а также полную независимость от платформ .Хотя с другой стороны недостаток необходимых функциональных возможностей , иногда , может свести на нет преимущества от использования стандартов .

Создатели страниц , тем не менее стараются выходить из сложившегося положения путем написания нескольких вариантов сайтов с предоставлением права выбора посетителю , или путем предоставления альтернативного содержимого . Поэтому в правилах хорошего тона - при внедрении в код страницы нестандартного элемента или стандартного , но сравнительно молодого , не поддерживаемого старыми броузерами - стало написание альтернативного содержимого в специальных дескрипторах (<NOSCRIPT> , <NOFRAMES>....)

В использовании нестандартных расширений тоже есть преимущества : во-первых все расширения появляются уже поддерживаемыми , по крайней мере теми броузерами , для которых они создавались , во-вторых и , это пожалуй самое главное , они позволяют решить очень важные задачи не доступные для простого HTML . Поэтому не бойтесь использовать их у себя на страницах , тем самым вносите свой посильный вклад в их популяризацию и скорейшую стандартизацию .

Используя интересные решения на своем сайте , Вы только определитесь в одном - для какого броузера будет оптимизирована Ваша страница . В случае необходимости отдельные ее части можно будет представить в двух видах , не забывая при этом подталкивать инертного пользователя на некоторые встречные подвижки - например указав альтернативную информацию в тэгах <NOSCRIPT> и </NOSCRIPT>.... укажите пользователю на необходимость включения этой функции в свойствах обозревателя или дайте ссылку на место в сети откуда , зачастую бесплатно , можно скачать update .

Хотя в свое время броузер от Netscape и был наиболее предпочитаемым среди пользователей , а вклад компании в развитие языка HTML трудно переоценить , реалии рынка броузеров таковы , что Microsoft Internet Explorer является самым популярным на сегодняшний день - ( более чем 80% ! пользователей ). И эта популярность пришла к нему не только потому , что он распространяется бесплатно , а еще и потому , что он действительно удобнее в работе .

Главными недостатками Microsoft Internet Explorer v5.0 являются недостатки свойственные всем продуктам от Microsoft - это проблемы при инсталляции , а также стремление расходовать максимальное количество оперативной памяти компьютера и как следствие потеря в скорости . Однако когда пользователь пытается распечатать страничку из IE v5.0 , на принтер выйдет только текст , а Netscape Communicator 4.51 на печать выведет и фоновый рисунок , что снизит читабельность и повысит расход чернил .

Или например IE v5.0 с помощью функции открыть в новом окне открывает окна , что более удобно ,не на весь экран ,как это делает NC 4.51. Так же при невозможности загрузить страницу IE v5.0 выдаст сообщение об этом в том же окне , когда NC 4.51 - в отдельном и если окон много сложно определить быстро в каком из них проблема .Есть в NC 4.51 так же некоторые сложности по сравнению с IE v5.0 с настройками кодировки страницы , а так же с изменением размера шрифта . И если открыто несколько окон одновременно IE v5.0 сразу же после открытия следующего автоматически пометит посещенные ссылки , в NC 4.51 же есть вероятность посетить их заново.

Продолжая сравнивать эти два продукта , отметим что в NC 4.51 не реализованны некоторые способы прокрутки окон , которые есть в IE v5.0 - например плавная прокрутка и прокрутка при помощи средней кнопки в трехкнопочной мыши , а так же нет возможности при просмотре исходника страницы его редактировать. И самое главное - Microsoft Internet Explorer давно уже избран как стандарт многими разработчиками программ и дополнительных утилит , что обеспечивает их полную совместимость и интеграцию .

Справедливости ради надо отметить ,что NC 4.51 несколько быстрее в работе со скриптами , менее требователен к ресурсам компьютера и не исключено , что следующие версии броузеров от Netscape будут гораздо удобнее чем NC 4.51 а интерфейс будет более продуманным .


Тенденции развития языка HTML.

World Wide Web стремительно развивается , програмное обеспечение для сети устаревает и обновляется в виде всевозможных заплаток и дополнений , а с ними развивается и сам язык HTML . Язык HTML находит применение все чаще в областях , где раньше не применялся , он перестает быть только лишь исключительно языком описания Web-страниц .Microsoft обьявила , что все будущие версии операционной системы Windows будут использовать язык HTML в качестве фундамента интерфейса пользователя .

Разработчиками создаются интерактивные модули , интегрируемые в HTML , языки программирования и средства поддержания баз данных , которые также могут быть внедрены в исходный код HTML ,язык расширяется для предоставления средств управления внешним видом и возможностями текста и графики . Если раньше , сразу после появления настольных персональных компьютеров , основной упор в работе делался на на их персональность (т.е. человек решал свои задачи , набирал тексты и распечатывал их и т.д.) , то сейчас все больше времени стало уделяться интерактивному взаимодействию .

Стиль работы меняется , меняются и средства доступа к содержимому .Язык HTML уже изначально создавался как платформо-независимый язык . Новые технологии применяются практически везде и довольно скоро пространство World Wide Web перестанет быть достоянием лишь пользователей настольных PC , уже сейчас некоторые пользователи активно пользуются голосовыми броузерами для незрячих или броузерами использующими азбуку Бройля , зачастую содержимое выводится не на монитор компьютера , а в телевизор ,когда применяются приставки с выходом в сеть или на телетайп , или на монохромные дисплеи различных организаторов-пейджеров и пр.

Уже в 1999 году в мире обьем продаж персональных настольных компьютеров упал примерно на 40% , когда продажи всевозможных носимых и карманных портативных устройств стремительно пошли вверх .В это сектор рынка естественно обратила свои взоры и Microsoft .Возникает сам собой вопрос - на что особенно необходимо обратить внимание при изучении языка сегодня , чтобы быть во всеоружии уже в недалеком будущем.

В 1997 году Консорциум W3C опубликовал спецификацию языка HTML 4,0 , в которой указано какие из элементов устарели и не рекомендуются к дальнейшему применению ( APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE и U ) , а так же новые элементы и атрибуты (ABBR, ACRONYM, BDO, BUTTON, COLGROUP, DEL, FIELDSET, FRAME, FRAMESET, IFRAME, INS, LABEL, LEGEND, NOFRAMES, NOSCRIPT, OBJECT, OPTGROUP, PARAM, SPAN, TBODY, TFOOT, THEAD и Q ),которые предлагается использовать в дальнейшем .

При этом Консорциум W3C обозначил тенденцию развития языка HTML все более в сторону логического форматирования содержимого. Была дана возможность идентификации практически любого элемента или группы элементов по имени , были описанны основные атрибуты для событий . Более однозначно было указанно на платформо-независимость языка HTML , другими словами было подчеркнуто , что HTML не является языком визуальной верстки текстов , а является языком логической разметки .

Почти все атрибуты, определяющие представление документа HTML (цвета, выравнивание, шрифты, графика и т.д.) являются нежелательными, взамен рекомендуется использовать таблицы стилей и классы. Атрибуты id и class позволяют авторам назначать элементам информацию об имени и классе для таблиц стилей, ссылок, скриптов, объявления объектов, общей обработки документа и т.д., а так же ожидается, что задачу представления таблиц в ближайшем будущем возьмут на себя таблицы стилей.

HTML 4.0 поддерживает более обширный набор дескрипторов устройств, так что авторы могут писать таблицы стилей в зависимости от устройств.Многие элементы теперь имеют атрибуты для событий, которые могут объединяться со скриптами и при наступлении события выполняется скрипт (например, при загрузке документа, при щелчке мыши и т.д.) , это легло в основу повышения интерактивности документов , дало возможность пользователям динамически изменять вид и содержание документов.

Появилась возможность говорить о надстройке к языку HTML , позволяющей создавать и визуализировать интерактивные Web-страницы без помощи подключаемых модулей , не увеличивая трафик - о Dynamic HTML . Применение новых решений направленно именно на снижение количества обращений к серверу т.е. на снижение трафика , что так необходимо в условиях роста популярности различных переносных устройств доступа в сеть .

Пример применения Dynamic HTML :


Форма-генератор МЕТА-тэгов.

При заполнении этой формы Вы можете оставить незаполнеными те поля , которые не считаете нужными . Поля , отмеченные символом * желательно , все-таки заполнить . И еще - не все поисковые роботы работают одинаково , поэтому некоторые META-тэги не всегда ими будут обрабатываться .

Название Вашего сайта:
Напишите название, например : Справочник HTML для начинающих с примерами .

Автор страницы:
Укажите имя или сетевой ник автора страницы :

* Ключевые слова для поиска Вашего сайта:
Здесь напишите список ключевых слов, не более 200 символов через запятую .

Управление индекасцией Вашего сайта поисковыми роботами:
Выберите один из предлагаемых вариантов:

* Описание Вашего сайта:
Краткое описание, максимум - 150 символов .

Управление индексацией страницы поисковыми роботами задает частоту повторного индексирования:
Выберите один из предлагаемых вариантов.

Генератор страницы:
Напишите название программы , при помощи которой Вы писали исходный код, например : MS Notepad

Владелец страницы:

Укажите имя физического или юридического лица ,которому принадлежат права на эту страницу , например: Super Company Ltd.

Автоматическая перезагрузка или пересылка на другой сайт:
Укажите длительность задержки в секундах (длительные задержки не желательны) и URL документа.
http://

Дата устаревания информации:
Укажите дату ,когда прекращается подгрузка документа из кэша и подается сетевой запрос.Например : Tue, 20 Aug 1996 14:25:27 GMT

Адрес электронной почты для отправки сообщений:
Укажите e-mail : имя@адрес.ru

Кодировка страницы :
Укажите кодировку в которой написан текст на Вашем сайте , например : koi8-r

Контроль за кэшированием:
Выберите способ кэширования Вашего документа.

Способ открытия окон:
Выберите один из предложеных вариантов.

Выделите этот фрагмент исходного кода и вставте между
(<head> .... </head>) Вашей страницы .


Здесь Вы можете отправить E-MAIL другу.

Пожалуйста заполните поля ниже расположеной формы и постарайтесь не кликать дважды на кнопке "OK". Заполнять поля отмеченные знаком * - не обязательно.

Кому:

* От кого:

* Обратный E-mail:


Обьявление <!DOCTYPE>.

Элемент <!DOCTYPE> должен первым указываться в документе HTML (теоретически).Он сообщает серверу WEB способ обработки документа и то какие дескрипторы могут находиться на странице, хотя чаще всего он игнорируется броузерами .Поэтому его применение строго не обязательно.
Синтаксис: <!DOCTYPE HTML "текст""URL" >
Здесь текст определяет версию HTML , а URL позволяет броузерам пользователей загрузить DTD например:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

Ниже описаны некоторые версии HTML

  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    Строгое DTD .Документы , использующие такое объявление типа документа , включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие кадры.
  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    Документы , использующие такое объявление типа документа ,включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты , относящиесяся к визуальному оформлению .
  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN"
    "http://www.w3.org/TR/REC-html40/frameset.dtd">
    Документы , использующие такое объявление типа документа ,включает все, что включено в предыдущее DTD, а также кадры.


Определение границ документа спомощью элемента <HTML>.

 На стартовую
В оглавление

Определение границ документа.
спомощью элемента <HTML>.

Тэг <HTML> определяет границы документа HTML ,ему соответствует конечный тэг </HTML>.Между этими двумя тэгами располагается собственно весь документ.Как и <!DOCTYPE> тэги <HTML> и </HTML> - не являются строго обязательными. Но , все-таки , их использование является правилами хорошего тона т.к. броузеры у пользователей могут быть всякие и не известно - насколько корректно они визуализируют такой код . А уже непосредственно документ , обозначенный тэгами <HTML> и </HTML> дополнительно делится на голову - <HEAD></HEAD> и тело - <BODY></BODY>

Синтаксис:<HTML> текст и прочие дескрипторы </HTML>.

Общая схема исходного кода документа HTML

<! DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 3.2 // EN “>
<HTML>
<HEAD>
служебные дескрипторы
</HEAD>
<BODY>
текст и прочие дескрипторы
</BODY>
</HTML>

Пример

На стартовую
В оглавление


Элементы ,входящие в состав раздела HEAD.

Область ,обозначаемая дескрипторами <HEAD> и </HEAD> служит только для формирования общей структуры документа,задавая его глобальные свойства.Информация находящаяся в этом разделе документа является служебной и необходима программе броузеру пользователя. Она допускает вложение между дескрипторами следующих элементов :<TITLE>,<BASE>,<ISINDEX>,<LINK>,<META>,<STYLE>.

  • Создание титула документа с помощью дескриптора <TITLE>
  • Разрешение относительных ссылок с помощью элемента <BASE>
  • Обеспечение поиска при помощи дескриптора <ISINDEX>
  • Взаимосвязь между документами с помощью дескриптора <LINK>
  • Предоставление дополнительной информации о документе с помощью <META>
  • Определение стиля страницы с помощью <STYLE>

Создание титула документа с помощью элемента <TITLE>

При помощи данного дескриптора создается краткое однострочное название страницы,которое выводится в заголовке окна броузера,рядом с названием самого броузера.Если титул опускается разработчиком страницы,броузер попытается сгенерировать его из названия файла.Рекомендуется делать длину титула минимальной и одновременно с этим информативной.
Синтаксис дескриптора : <TITLE> текст </TITLE>

Разрешение относительных ссылок с помощью элемента <BASE>

Данный дескриптор автоматически задаёт URL для относительных ссылок документа,которые по умолчанию указывают на тот же сервер,где расположена сама страница.Однако этот дескриптор позволяет разрешать также ссылки относительно других каталогов и серверов.Дескриптор <BASE> имеет один лишь атрибут HREF и не имеет конечного тега.
Синтаксис дескриптора :<BASE HREF="протокол://имя сервера/путь">

Здесь протокол соответствует схеме извлечения данных Internet,например, HTTP;имя сервера соответствует имени или IP-адресу сервера,например,www.microsoft.com;путь определяет расположение ресурса в иерархии каталогов предыдущего сервера.Путь является необязательным компонентом указателя URL.Если протокол и имя сервера будут опущены,то указатель по умолчанию будет относиться к текущему серверу. Это очень полезный элемент он избавляет разработчика от необходимости вносить множественные коррективы в ссылках исходного кода документа,например, при размещении копии документа на другом сервере.Достаточно лишь вставить в заголовок копии элемент <BASE> с именем прежнего сервера и тогда целый узел будет отзеркален лишь копией одного файла ,а ссылки будут адресоваться по прежнему адресу.

Обеспечение поиска при помощи элемента <ISINDEX>

Дескриптор <ISINDEX> используется во время проведения интерактивного поиска на Web странице.Этот элемент вставляется в документ,сгенерированный сценарием CGI, и предоставляет пользователю сформулировать критерии поиска.При этом любой введённый в приглашении текст склеивается с URL самого документа и пересылается сценарию CGI для обработки в форме URL?слово1+слово2+...+словоN. Это стандартный синтаксис для возврата значений сценариям CGI,согласно которому знак вопроса соответствует началу строки данных,а каждый плюс соответствует пробелу.Дескриптор внедряется в документы исключительно ради сценариев CGI ,для предоставления пользователю возможности поиска по заданным словам.Он поддерживает атрибуты : prompt который позволяет изменять текст приглашения и action ,последний указывает сценарий или программу ,которой будет передан критерий поиска .
Синтаксис :<ISINDEX prompt="строка" action="сценарий">
Где строка и задаёт текст приглашения длиной не более 35 символов.

Взаимосвязь между документами с помощью элемента <LINK>

Справедливости ради надо отметить ,что этот элемент используется довольно редко,хотя и появился он в самой первой версии языка HTML.Этот дескриптор можно использовать для создания в документе панелей инструментов и меню,для определения последовательности печати файлов HTML и для связывания таких ресурсов,как таблицы стилей и сценарии.С дескриптором <LINK> используется ряд атрибутов :
  • href
    Указатель URL связанного документа.
  • rel
    Атрибут указывает как связаны документы с заданным атрибутом href . Ему могут быть присвоены значения Present,History,Made,Annotation и Precede .
    Например: <LINK rel=Annotation href="annotations.html">
    означает ,что все аннотации для текущего документа расположены в файле annotations.html.
  • rev
    Атрибут во многом похож на rel ему могут быть присвоены те же значения.
    Например: <LINK rev=Annotation href="master.html">
    означает ,что текущий документ содержит аннотации к файлу master.html.
  • title
    Атрибут относится к href и задает название документа,на который ссылается href .Естественно , что значение атрибута должно соответствовать значению дескриптора <TITLE>.
  • name
    Позволяет назначить ссылке на фрагмент текущего документа более описательное имя.
  • methods
    Позволяет указать метод извлечения документа ,например ,FTP ,Gopher и т. д.
  • lang
    Позволяет указать информацию о языке документа , например : ru , en , fr .
  • target
    Позволяет указать информацию о целевом фрейме .
  • charset
    Позволяет указать кодировки символов документа .
В настоящее время дескриптор <LINK> используется только для ссылок на внешние таблицы стилей.
Например: <LINK rel=stylesheet href="style.css" type="text/css">

,где style.css файл ,который содержит набор дескрипторов <style> и любые другие определения таблицы стилей.

Предоставление дополнительной информации о документе с помощью <META>

Элемент предоставляет дополнительные сведения о способе обработки документа,он позволяет поисковым машинам идентифицировать и классифицировать документ без его загрузки.Элемент поддерживает парные атрибуты ,первый из которых name определяет тип данных,а второй content - содержание.Атрибут name используется приложением-клиентом (броузером)для получения дополнительной информации о документе.Его часто заменяют элементом http-equiv ,который используется сервером для создания дополнительных полей при выполнении запроса.В этом случае тэг <META> с атрибутом будет включен в заголовок ответа броузера .Другими словами атрибут name используется с целью предоставления сведений о документе ,которые могут пригодиться при его поиске, а элемент http-equiv поручает выполнение каких либо действий серверу .

Например: <META HTTP-EQUIV="Window-target" CONTENT="_top">

Использование элемента http-equiv со значением "refresh" позволяет организовать принудительное обновление страницы с некоторым промежутком времени или загрузку нескольких страниц с определенным интервалом ,что незаменимо при создании страниц ,где публикуются непрерывно меняющиеся данные (скажем курсы валют или акций).Значение элемента content в этом случае означает промежуток между обновлениями в секундах ,так если оно равно нулевому значению - страница будет обновляться непрерывно.

<META HTTP-EQUIV="Refresh" content="5;URL=http://www.arcus.lv/dimas/meta2.html">
Перезагрузка документа .
<META HTTP-EQUIV="Expires" content="Дата">
Дата ,обозначающая срок годности документа ,при его значении равном "0" документ будет подгружаться не из кэша а с сервера.
<META HTTP-EQUIV="Reply-to" content="Имя@Адрес">
Адрес электронной почты .
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">
Описание типа и характеристик документа.
<META HTTP-EQUIV="Content-language" content="en">
Описание языка документа.
<META HTTP-EQUIV="Cache-Control" content="no-cache">
Контроль за кэшированием документа.
    Может принимать значения:
  • no-store - не сохраняется.
  • no-cache - не сохраняется в кэш.
  • Public - доступен для любого кэширования.
  • Private - кэшируется в частных кэшах.
<META HTTP-EQUIV="Window-target" content="_top">
Определяет способ появления новых окон браузера.
<META HTTP-EQUIV="pragma" content="no-cache">
Контроль за кэшированием документа.
<META HTTP-EQUIV="Set-Cookie" content="NAME=имя;EXPIRES=дата;DOMAIN=имя домена;PATH=путь;SECURE">
Установка Cookie для броузера в том случае , когда надо сохранить информацию в компьютере посетителя и при необходимости к ней обратиться.
<META name="Author" content="Имя автора">
Имя автора документа.
<META name="Keywords" lang="ru" content="Слово1,слово2,слово3 ...">
Набор ключевых слов для поиска.
<META name="Title" content="Название">
Название станицы.
<META name="Robots" content="index,nofollow">
Указание индексации поисковыми роботами данного документа
    Может принимать значения:
  • ALL - индексировать всё.
  • INDEX - индексировать эту страницу.
  • FOLLOW - индексировать ссылки на этой странице.
  • NONE - не индексировать ,игнорировать полностью.
  • NOINDEX - не индексировать ,игнорировать эту страницу.
  • NOFOLLOW - не индексировать ссылки на этой странице.
<META name="Description" content="Содержание">
Краткое однострочное описание содержания документа.
<META name="Document-state" content="Dynamic">
Определяет единовременную либо постоянную индексацию документа поисковыми системами.
    Может принимать значения:
  • Static - индексировать единожды.
  • Dynamic - индексировать многократно.
<META name="Generator" content="Название">
Название приложения в котором был создан документ.
<META name="Copyright" content="Условия">
Условия копирования и распространения документа.

Для автоматизации написания META-тэгов воспользуйтесь формой-генератором .

Определение стиля страницы с помощью <STYLE>

Применение дескрипторов <STYLE> и </STYLE> само по себе является отдельным способом форматирования документа ,когда текст форматируется целиком автоматически.Между дескрипторами <STYLE> и </STYLE> указывается описание стилей документа HTML ,определяющих свойства элементов ,классов ,идентификаторов и общих стилей.Внутри дескриптора <STYLE> должны находиться атрибуты :

  • TYPE
    Атрибут описывает тип таблиц стилей.
    Например :<STYLE TYPE="text/javascript">.
  • media
    Позволяет указать информацию о том под какое из устройств вывода стилизован документ , например :
    • screen
      Указывает на экраны компьютеров, не разделенные на страницы.
    • tty
      Указывает на носители с фиксированной сеткой для символов, таких как телетайпы, терминалы или переносные устройства с ограниченными возможностями отображения.
    • tv
      Указывает на устройства типа телевизора (низкое разрешение, цвета, ограниченные возможности прокрутки).
    • projection
      Указывает на всевозможные проекторы.
    • handheld
      Указывает на карманные устройства (небольшой экран, монохромный, растровая графика, ограниченный диапазон).
    • print
      Указывает на страничные, непрозрачные материалы и документы, просматриваемые на экране в режиме предварительного просмотра печати.
    • braille
      Указывает на тактильные устройства с алфавитом Бройля (для незрячих).
    • aural
      Указывает на синтезаторы речи.
    • all
      Указывает навсе устройства используется в случае , если разработчик предоставляет различные варианты с возможностью выбора.


Элемент <BODY>.

На стартовую
В оглавление

Элемент <BODY> предназначается для выделения той части документа ,которая будет визуализирована для пользователя.Он имеет как начальный ,так и конечный теги.Начальный тег <BODY> может иметь несколько атрибутов .

Вложенные атрибуты элемента <BODY>

  • BACKGROUND
    Атрибут задает графическое изображение ,которое как черепица заполнит фон документа.Файл с изображением должен быть сохранен в формате GIFилиJPEG .
    Синтаксис :<BODY BACKGROUND="(URL)(путь) имя файла">
    .Вданном случае файл с изображением фона лучше размещать в том же каталоге ,что и сам файл , тогда (URL) и (путь) указывать не нужно.
  • BGCOLOR
    Этот атрибут задает цвет фона документа при помощи шеснадцатеричных значений интенсивности цветов RGB или при помощи строчного литерала ,соответсвующего названию цвета.
    Синтаксис : <BODY BGCOLOR="#ff0000"> или <BODY BGCOLOR="RED">.
  • TEXT
    Этот атрибут задает используемый по умолчанию цвет текста ,который не является гиперссылкой.По умолчанию такой текст будет черным.
    Синтаксис:<BODY TEXT=" цвет ">.
  • LINK
    Этот атрибут задает цвет гиперссылки ,в большенстве броузеров он задан по умолчанию темно синим.
    Синтаксис : <BODY LINK="цвет" > .
  • ALINK
    Этот атрибут задает цвет активной гиперссылки ,он меняет цвет гиперссылки в момент щелчка по ней мышью,не желательно задавать ему цвет фона по понятным причинам.
    Синтаксис : <BODY ALINK="цвет" > .
  • VLINK
    Этот атрибут задает цвет посещенной гиперссылки ,не желательно задавать ему цвет фона и цвет атрибута LINK по понятным причинам.
    Синтаксис : <BODY VLINK="цвет" > .
  • BGPROPERTIES
    Этот атрибут задает свойства фонового изображения .В данный момент браузерами поддерживается единственное его значение fixed,запрещающее скролинг изображения .
    Синтаксис : <BODY BGPROPERTIES="fixed" > .
  • TOPMARGIN
    Этот атрибут задает верхнюю границу страницы в пикселах .
    Синтаксис : <BODY TOPMARGIN=число > .
  • BOTTOPMARGIN
    Этот атрибут задает нижнюю границу страницы в пикселах .
    Синтаксис : <BODY BOTTOPMARGIN=число > .

На стартовую
В оглавление
Наверх


Управление цветом.

 На стартовую
В оглавление

Шестнадцатеричные цвета RGB

Перечень строчных литералов с названиями цветов довольно обширен и более чем достаточен.Если необходимо задать в качестве фонового цвет настолько необычный ,что ему даже нет названия ,то можно воспользоваться шестнадцатеричным значением.

Шестнадцатеричная система счисления , в отличии от десятичной в своём ряду цифр имеет не десять знаков , а шестнадцать - отсюда и название . Соответственно не повторяющихся вариантов сочетаний из двух цифр может быть только - 256 , для продолжения ряда цифр после 9 используются буквы от A до F , следовательно ряд будет выглядеть так -
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Для перевода чисел из одной системы счисления в другую и наоборот воспользуйтесь калькулятором , приведенным ниже . Максимальное значение здесь может быть FF - 255 .

Десятичные:
Шестнадцатеричные:

В этом случае цвет задается тремя шестнадцатеричными числами ,каждое из которых состоит из двух цифр.Первое число определяет интенсивность красного цвета ,среднее- зеленого ,последнее- синего цвета. Все числа могут принимать значения в диапазоне от 00 до FF (от 0 до 255 ).Например : зеленый цвет задается как #00FF00 ,красный - как #FF0000 ,синий - как #0000FF ,белый - как #FFFFFF ,полное отсутствие цвета или черный задается как #000000.

В расположеной ниже форме Вы сможете задать любые шестнадцатеричные значения каждого из трех цветов и посмотреть результат их смешения , кликнув в поле вывода.

RED GREEN BLUE
...кликни здесь

Примеры некоторых шестнадцатеричных значений цветов RGB

Аквамарин | "aqua"
Белый | "white"
Желтый | "yellow"
Зеленый | "green"
Каштановый | "maroon"
Красный | "red"
Оливковый | "olive"
Пурпурный | "purple"
Светло-зеленый | "lime"
Серебристый | "silver"
Серый | "gray"
Сизый | "teal"
Синий | "blue"
Ультрамарин | "navy"
Фуксиновый | "fuchsia"
Черный | "black"

Градации красного

Код | Цвет | Код | Цвет
#010000 |  | #800000 |
#100000 |  | #900000 |
#200000 |  | #A00000 |
#300000 |  | #B00000 |
#400000 |  | #C00000 |
#500000 |  | #D00000 |
#600000 |  | #E00000 |
#700000 |  | #FF0000 |

Градации зеленого

Код | Цвет | Код | Цвет
#000100 |  | #008000 |
#001000 |  | #009000 |
#002000 |  | #00A000 |
#003000 |  | #00B000 |
#004000 |  | #00C000 |
#005000 |  | #00D000 |
#006000 |  | #00E000 |
#007000 |  | #00FF00 |

Градации синего

Код | Цвет | Код | Цвет
#000001 |  | #000080 |
#000010 |  | #000090 |
#000020 |  | #0000A0 |
#000030 |  | #0000B0 |
#000040 |  | #0000C0 |
#000050 |  | #0000D0 |
#000060 |  | #0000E0 |
#000070 |  | #0000FF |


Структурное форматирование.

  • Комментарии <COMMENT >
  • Заголовки <Hn >
  • Разделительные линии <HR >
  • Элемент <P >
  • Элементы <BR > и <NOBR >
  • Элемент <WBR >
  • Элемент <PRE >
  • Элемент <DIV >
  • Элемент <CENTER >
  • Элемент <ADRESS >
  • Элемент <BLOCKQUOTE >

Комментарии <COMMENT >

Элемент позволяет скрыть от пользователя коментарии к исходному коду , а так же для сокрытия сценариев Java Script от броузеров , которые не поддерживают их.
Синтаксис :<COMMENT> Текст комментария </COMMENT>.
Полностью аналогичен старому варианту задания комментариев
Синтаксис :<!- - Текст комментария //- ->

Шесть уровней заголовков <Hn>

Соответствующие каждому уровню гарнитура и размер шрифта зависят от броузера ,стилю <H1> назначается самый большой и самый жирный шрифт ,а стилю <H6> назначается самый маленький и самый невзрачный шрифт.Элемент может иметь атрибут align ,который указывает отступ left , center или right.
Синтаксис :<Hn align=отступ> Текст заголовка </Hn>.

Разделительные линии <HR>

Элемент <HR> используется для проведения горизонтальной черты в документе ,он может иметь атрибуты :color ,задающий цвет линии ,height высота в пикселах width ширина в пикселах или процентах от ширины экрана ,align режим выравнивания , и не имеет конечного тега .
Синтаксис : <HR align="center" height=n width=n color="цвет">.

Элемент <P>

Этот элемент задает один из способов разбиения текста на абзацы.Он может иметь вложенный атрибут align ,который указывает отступ left , center или right.Каждый следующий абзац игнорирует ,заданное для предыдущего абзаца значение align.
Синтаксис :<P align=отступ> Текст абзаца </P>.

Элемент <BR>

Этот элемент задает разрыв текста с переходом на новую строку.Он может иметь вложенный атрибут clear ,который может принимать значения left , all или right тем самым указывать обтекание текста вокруг плавающих изображений вставленных в текст нестандартным способом.Каждый следующий абзац игнорирует ,заданное для предыдущего абзаца значение clear.
Синтаксис :<BR clear=обтекание> Текст .
Может быть отменен тэгами <NOBR> и </NOBR>

Элемент <WBR>

Этот элемент задает разрыв текста в данном месте при необходимости с переходом на новую строку .
Синтаксис :<WBR >Текст .

Элемент <PRE>

Весь текст ,заключенный в тэги <PRE> и </PRE> будет визуализирован броузером точно так ,как он визуализирован в исходном коде документа ,кроме того текст выводится моноширинным шрифтом ,что значительно упрощает задачу форматирования текста в колонки.Атрибут поддерживается не всеми броузерами ,он может иметь атрибут width ,который задает ширину отводимого пространства под текст в символах.Элемент сменил собой устаревшие элементыы <XMP> ,<LISTING> и <PLAINTEXT>
Синтаксис : <PRE width=число символов >...текст ...</PRE>.

Элемент <DIV>

Элемент <DIV> позволяет выделить в структуре документа несколько разделов.Он является блочным элементом ,функционирующим во многом подобно элементу <P>.Если закрывающий тэг </P> опущен ,то <DIV> эффективно заменяет его и начинает новый абзац.Он может иметь атрибут align ,который указывает отступ left , center или right.Каждый следующий раздел игнорирует ,заданное для предыдущего раздела значение align.
Синтаксис :<DIV align=отступ> Текст раздела </DIV>.

Элемент <CENTER>

Элемент <CENTER> текст </CENTER> полностью идентичен конструкции
<DIV align=center> Текст раздела </DIV>.

Элемент <ADRESS>

Элемент <ADRESS> используется для оформления контактной информации текущего документа ,будь то адрес электронной почты или полный почтовый адрес с номером телефона.
Синтаксис : < ADRESS>контактная информация </ADRESS>.

Элемент <BLOCKQUOTE>

Элемент <BLOCKQUOTE> позволяет выделить обьемный текст-цитату из общего текста.
Синтаксис :<BLOCKQUOTE> Текст </BLOCKQUOTE>


Организация текста в списки.

  • Элемент <OL>
  • Элемент <UL>
  • Элемент <DL>
  • Элемент <MENU>
  • Элемент <DIR>

Элемент <OL>

Элемент <OL> используется с целью задания нумерованых списков ,имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания с какого индекса начинается нумерация списка.Элемент <OL> включает в себя дополнительный элемент <LI> ,который задает элементы списка .
Синтаксис :<OL type=1 start=1 > <LI> элемент списка <LI> элемент списка </OL>.

Пример :
  1. элемент списка
  2. элемент списка
.

Элемент <UL>

Элемент <UL>, по сути является аналогом <OL> без дополнительных элементов <LI> ,он используется с целью задания ненумерованых списков ,имеет атрибут type=circle,square, или disc для задания вида маркера.Элемент <UL> включает в себя дополнительный элемент <LI> ,который задает элементы списка.
Синтаксис :<UL type=circle > <LI> элемент списка <LI> элемент списка </UL>.

Пример :
  • элемент списка
  • элемент списка
.

Элемент <DL>

Элемент <DL>используется с целью задания словарей ,глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные элементы <DT> и <DD>,которые обозначают соответственно термин и определение.
Синтаксис :<DL > <DT> термин 1 <DD>определение 1 <DT> термин 2 <DD>определение 2 </UL>.

Пример :
термин 1
определение 1
термин 2
определение 2
.

Элемент <MENU>

Элемент <MENU> используется с целью создания списков по логическому определению,такие списки могут связываться с другими элементами документа логически.
Синтаксис :<MENU><LI> элемент списка <LI> элемент списка </UL> </MENU>.

Пример :
  • элемент списка
  • элемент списка
    • .

    Элемент <DIR>

    Элемент <DIR> используется с целью создания списков по логическому определению,такие списки могут связываться с другими элементами документа логически.
    Синтаксис :<DIR><LI> элемент списка <LI> элемент списка </UL> </DIR>.

    Пример :
  • элемент списка
  • элемент списка
    • .


Форматирование символов.

  • Элемент < EM >
  • Элемент < CODE >
  • Элемент < KBD >
  • Элемент < VAR >
  • Элемент < SAMP >
  • Элемент < DFN >
  • Элемент < CITE >
  • Элемент < STRONG >
  • Элемент < I >
  • Элемент < B >
  • Элемент < U >
  • Элемент < STRIKE >
  • Элемент < TT >
  • Элемент < SUP >
  • Элемент < SUB >
  • Элемент < BIG >
  • Элемент < SMALL >
  • Элемент < BLINK >
  • Элемент < FONT >
  • Элемент < BASEFONT >
  • Элемент < ABBR >
  • Элемент < ACRONYM >
  • Элемент < INS >
  • Элемент < DEL >
  • Элемент < Q >

Элемент <EM>

Элемент <EM> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<EM> Текст </EM>.

Пример :Текст выделенный тэгами <EM> и </EM>.

Элемент <VAR>

Элемент <VAR> используется с целью дополнительного выделения переменных в коде совместно с элементом <CODE> .
Синтаксис :<VAR> Переменная </VAR>.

Пример :Текст выделенный тэгами <VAR> и </VAR>.

Элемент <KBD>

Элемент <KBD> используется с целью выделения диалога пользователя с компьютером .
Синтаксис :<KBD> Ввод с клавиатуры </KBD>.

Пример :Текст выделенный тэгами <KBD> и </KBD>.

Элемент <VAR>

Элемент <VAR> используется с целью дополнительного выделения переменных в коде совместно с элементом <CODE> .
Синтаксис :<VAR> Переменная </VAR>.

Пример :Текст выделенный тэгами <VAR> и </VAR>.

Элемент <SAMP>

Элемент <SAMP> используется с целью выделения диалога пользователя с компьютером .
Синтаксис :<SAMP> Системное сообщение компьютера </SAMP>.

Пример :Текст выделенный тэгами <SAMP> и </SAMP>.

Элемент <DFN>

Элемент <DFN> используется с целью обозначения терминов и определений по типу словарей или глоссариев.
Синтаксис :<DFN> Текст </DFN>

Пример :Текст выделенный тэгами <DFN> и </DFN>

Элемент <CITE>

Элемент <CITE> используется с целью обозначения источника информации ,из которого взята цитата.
Синтаксис :<CITE> Текст </CITE>

Пример :Текст выделенный тэгами <CITE> и </CITE>.

Элемент <STRONG>

Элемент <STRONG> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<STRONG> Текст </STRONG>.

Пример :Текст выделенный тэгами <STRONG> и </STRONG>.

Элемент <I>

Элемент <I> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<I> Текст </I>.

Пример :Текст выделенный тэгами <I> и </I>.

Элемент <B>

Элемент <B> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<B> Текст </B>.

Пример :Текст выделенный тэгами <B> и </B>.

Элемент <U>

Элемент <U> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<U> Текст </U>.

Пример :Текст выделенный тэгами <U> и </U>.

Элемент <STRIKE>

Элемент <STRIKE> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<STRIKE> Текст </STRIKE>.

Пример :Текст выделенный тэгами <STRIKE> и </STRIKE>.

Элемент <TT>

Элемент <TT> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<TT> Текст </TT>.

Пример :Текст выделенный тэгами <TT> и </TT>.

Элемент <SUP>

Элемент <SUP> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<SUP> Текст </SUP>.

Пример :Текст выделенный тэгами <SUP> и </SUP>.

Элемент <SUB>

Элемент <SUB> используется с целью выделения особым шрифтом слова или текста.
Синтаксис :<SUB> Текст </SUB>.

Пример :Текст выделенный тэгами <SUB> и </SUB>.

Элемент <BIG>

Элемент <BIG> используется с целью выделения особым шрифтом слова или текста относительно основного текста.
Синтаксис :<BIG> Текст </BIG>.

Пример :Текст выделенный тэгами <BIG> и </BIG>.

Элемент <SMALL>

Элемент <SMALL> используется с целью выделения особым шрифтом слова или текста относительно основного текста.
Синтаксис :<SMALL> Текст </SMALL>.

Пример :Текст выделенный тэгами <SMALL> и </SMALL>.

Элемент <BLINK>

Элемент <BLINK> используется с целью выделения особым шрифтом слова или текста относительно основного текста.
Синтаксис :<BLINK> Текст </BLINK>.

Пример :Текст выделенный тэгами <BLINK> и </BLINK>.

Элемент <FONT>

Элемент <FONT> используется с целью выделения особым шрифтом слова или текста .С ним применяются два атрибута size и color.Некоторые броузеры поддерживают атрибут face ,позволяющий задать любой из перечня шрифтов ,если броузер не находит заданный шрифт - то используется шрифт ,заданный по умолчанию.
Синтаксис :<FONT size=n color="цвет"> Текст </FONT>

или
<FONT face=имя color="цвет"> Текст </FONT>.

Элемент <BASEFONT>

Элемент <BASEFONT> используется как альтернатива атрибуту size элемента <FONT> ,он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега .По умолчанию значение его задается равным 3 ,значение size может выражаться так же и относительным размером ,например , размер -1 означает размер на один меньший , чем по умолчанию.
Синтаксис : <BASEFONT sise=n>.

Элемент <ABBR>

Элемент <ABBR> используется с целью логического выделения слова , обозначающего абревиатуру , например ФСБ , FBI , HTML , WWW , MTV
Синтаксис : <ABBR>ФСБ</ABBR>.

Элемент <ACRONYM>

Элемент <ACRONYM> используется с целью логического выделения слова , обозначающего акроним , например GmBH , Ltd. , и т.д. , и т.п. ,
Синтаксис : <ACRONYM>Ltd.</ACRONYM>.

Элемент <INS>

Элемент <INS> используется с целью выделения особым шрифтом слова или текста , когда требуется показать явно , что текст был вставлен после опубликования документа .
Синтаксис : <INS>текст</INS>.

Пример :Текст выделенный тэгами <INS> и </INS>.

Элемент <DEL>

Элемент <DEL> используется с целью выделения особым шрифтом слова или текста , когда требуется показать явно , что текст был удален после опубликования документа .
Синтаксис : <DEL>текст</DEL>.

Пример :Текст выделенный тэгами <DEL> и </DEL>.

Элемент <Q>

Элемент <Q> используется с целью логического выделения краткой цитаты , встроенной в текст.Поддерживает атрибут lang и в зависимости от особенностей языка соответственно помечает цитату .
Синтаксис : <Q lang="ru">текст</Q>.


Организация ссылок.

Элемент <A>

Элемент <A> используется с целью создания ссылок на другие элементы документа или даже на другие документы ,такие ссылки являют собой основную причину ошеломляющей популярности пространства World Wide Web ,где пользователь может легко перескочить с одного фрагмента текста на другой или со страницы на страницу ,не задавая явным образом URL последних.Элемент выполняет два действия : задает имя ссылки и задает ссылку на имя. Имя ссылки броузер автоматически выделяет другим цветом и подчеркивает.

  • name
    Для задания имени используется атрибут name ,который задает привязку ссылки в тексте ,на которую и будет производиться ссылка .
    Синтаксис :<A name=имя> необязательный текст </A >.
  • href
    Для организации ссылки используется атрибут href ,который задает адрес ссылки.Он может указывать или на имя ссылки в тексте ,или на URL и имя файла.
    Синтаксис :<A href="URL"> текст для щелчка </A >
    ,
    или же в тексте :
    <A href="#имя"> текст для щелчка </a>
  • methods
    Атрибут указывает метод извлечения документа ,например ,FTP ,Gopher и т. д.
    Синтаксис :<A methods="название"> необязательный текст </A >.
  • frame
    Атрибут используется для указания названия кадра ,в котором должен быть визуализирован целевой документ .
    Синтаксис :<A frame="имя фрейма"> необязательный текст </A >.
  • id
    Для организации ссылки используется атрибут href ,который задает адрес ссылки. Атрибут id идентичен атрибуту name с той разницей , что он может вставляться в другие тэги , отличные от тэга <A>
    Например :<P id="имя абзаца"> далее в тексте ...<A href="# имя абзаца"> Ссылка</A >.
  • title
    Для визуализации подсказки ссылки используется атрибут title ,который задает название ссылки
    Синтаксис :<A title=" имя ссылки"> Ссылка</A >.

    Пример : ссылка наверх
  • accesskey
    Атрибут используется для указания горячей клавиши , при нажатии на которую осуществляется переход по ссылке
    Синтаксис :<A accesskey=" имя клавиши"> Ссылка</A >.

    Пример : ссылка наверх - нажмите ALT+u

Ниже приведены примеры ссылок на различные файлы по разным протоколам :

  • Ссылка на HTML файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/page1.html">Пример</a>
    Пример
  • Ссылка на ZIP файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/test.zip">Пример</a>
    Пример
  • Ссылка на TXT файл по протоколу HTTP
    <a href="http://www.arcus.lv/dimas/test.txt">Пример</a>
    Пример
  • Ссылка на EXE файл по протоколу FTP
    <a href="ftp://ftp.sausage.com/pub/hotdog/hotdog6/hotdog6install.exe">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto
    <a href="mailto:name@domen.ru">Пример</a>
    Пример
  • Ссылка на e-mail,при помощи протокола mailto с автоподставлением темы
    <a href="mailto:name@domen.ru?Subject=E-mail to Web-master">Пример</a>
    Пример
  • Ссылка на MPG файл по протоколу HTTP , в случае если броузер сам не умеет открывать данные файлы , то запускается независимая программа , умеющая это делать.
    <a href="http://www.arcus.lv/dimas/roma.mpg">Пример</a>
    Пример ( 204 kB ).
  • Ссылка на группу новостей,при помощи протокола news
    <a href="news:comp.infosystems.www.announce">Пример</a>
    Пример

Последняя ссылка будет работать только , если Ваш провайдер поддерживает доступ к телеконференциям .


Вставка в документ обьектов.

 На стартовую
В оглавление

Вставка в документ обьектов.

Все мультимедиа-компоненты в сети можно разделить на два основных типа : содержимое ,обрабатываемое непосредственно броузером и содержимое , обрабатываемое дополнительными средствами . Броузер определяет способ обработки по типу содержимого файла и либо сам обрабатывает данные , либо передаёт их на обработку дополнительным приложениям . Тип содержимого файла определяется либо по его расширению : .gif , .jpg , .mpg , .wrl и т.д. , либо по специальному коду
content type="тип содержимого"
, вставляемому в исходный код документа , где тип содержимого может принимать значения : text/html , image/gif , video/quicktime и т.д. .

Так как язык HTML создавался как язык разметки текста и только для этих целей , то естественно что в нем изначально не была предусмотренна поддержка мультимедийных объектов. В последнее же время многие компании-разработчики стали предоставлять пользователям их броузеров доступ к мультимедиа-содержимому , встраивая в них различные plug-ins . Они позволяют представить мультимедиа-содержимое как внутреннее содержимое Web-страницы и могут располагаться как во всё окно , так и в заданных размерах. На практике получается следующее - если броузер подгружает файл с таким содержимым впервые , то пользователю предлагается скачать плагин , который запишется на жесткий диск и в следующий раз броузер передаст мультимедиа-содержимое на обработку уже сразу ему .
Пример (84 kB) .

В Microsoft , например , для этих целей были созданны элементы управления ActiveX , позволяющие использовать разнообразное содержимое , включая даже электронные таблицы и средства управления от Windows, хотя на самом деле общие стандарты для всех броузеров и платформ , на которых они работают , ещё не разработанны .

Если же броузер не в состоянии обработать мультимедиа-данные сам или при помощи встроенных модулей , то он запускает внешние приложения , а в Windows , например , они прописанны в регистре , и передает им эти данные . Внешние приложения , например RealAudio , уже не в окне броузера обрабатывают содержимое для пользователя .

  • Элемент <IMG>.
  • Элемент <MAP>.
  • Элемент <AREA>.
  • Элемент <BANNER>.
  • Элемент <BGSOUND>.
  • Элемент <MARQUEE>.
  • Элемент <APPLET>.
  • Элемент <SCRIPT>.
  • Элемент <OBJECT>.
  • Элемент <EMBED>.

Элемент <IMG>

Элемент <IMG> Используется для вставки в тело документа графического изображения.Под графическим изображением подразумевают : маленькие пиктограммы ,рисунки ,графические объекты и карты изображений ,занимающие большую часть окна броузера.Кроме того элемент <IMG> поддерживает различные атрибуты ,определяющие расположение изображения относительно окружающего текста и содержания Web страницы в целом .Изображение может выравниваться по левой ,правой ,верхней или нижней границе строки или располагаться в центре окна .

  • src
    Этот атрибут указывает на файл графики ,задавая его URL.
    Синтаксис :<IMG src="URL">.

    Пример :
    Кот Рома
  • alt
    В некоторых случаях ,когда броузер не в состоянии загрузить файл с изображением , либо когда пользователь намеренно ,с целью сэкономить время и деньги,отключает загрузку картинок ,на экране высвечивается альтернативный текст типа здесь нарисован логотип фирмы .
    Синтаксис :<IMG alt="описание">.

    Пример :
    Альтернативный текст к рисунку
  • align
    Этот атрибут задает расположение рисунка в окне и его выравнивание.Он может принимать значения :bottom-по нижнему краю ,left-влево ,middle-по центру ,right-справа ,top-по верхнему краю.
    Синтаксис :<IMG align="значение">.
  • width
    Этот атрибут задает ширину области в пикселах ,отводимой в окне под изображение .В этом случае рисунок автоматически масштабируется броузером под заданный размер.
    Синтаксис :<IMG wigth=число>.
  • height
    Этот атрибут задает высоту области в пикселах ,отводимой в окне под изображение.В этом случае рисунок автоматически масштабируется броузером под заданный размер.
    Синтаксис :<IMG height=число>

    Обратите Ваше внимание на тот факт , что размер изображения в килобайтах не меняется - какие бы вы не задавали параметры width и height

    Пример width=50 | Кот Рома
    Пример height=30 | Кот Рома
    Пример width=50 height=100 | Кот Рома
    Пример width=100 height=50 | Кот Рома
  • hspace
    Этот атрибут задает пустое пространство в пикселах справа и слева от рисунка.
    Синтаксис :<IMG hspace=число >.

    Пример :
    Кот Рома
  • border
    Этот атрибут задает в пикселах толщину рамки вокруг рисунка.
    Синтаксис :<IMG border= число >.

    Пример :
    Кот Рома
  • vspace
    Этот атрибут задает пустое пространство в пикселах сверху и снизу от рисунка .
    Синтаксис :<IMG vspace=число>.

    Пример :
    Кот Рома
  • ismap
    Этот атрибут разрешает использовать изображения ,отдельные части которого связаны со ссылками и позволяют выполнять переходы.Такие рисунки называют MAP карта ,они используются совместно с элементом <A>.В этом случае реакцию на щелчек по карте отрабатывает сервер.
    Синтаксис : <A href="URL карты"><IMG src="URL изображения" ismap>
  • usemap
    Этот атрибут разрешает использовать изображения ,отдельные части которого связаны с картами,они используются совместно с элементом <MAP>.В этом случае реакцию на щелчек по карте отрабатывает броузер.
    Синтаксис :<IMG src="URL изображения" usemap="URL"карты(#имя карты)>
  • lowsrc
    Этот атрибут задает URL файла с низкокачественной копией основного изображения,которое может быть визуализированно до изображения ,заданного атрибутом src.
    Синтаксис :<IMG lowsrc=URL>
  • dynsrc
    Этот атрибут задает URL файла с видеоклипом или сценой VRML.
    Синтаксис :<IMG dynsrc=URL>
  • start
    Этот атрибут используется совместно с атрибутом dynsrc ,он задает возможность управления процессом воспроизведения клипа , принимает значения fileopen-сразу после загрузки и mouseover-при наведении курсора.
    Синтаксис : <IMG dynsrc=URL start=mouseover>
  • loop
    Этот атрибут задает количество воспроизведений видеоклипа.Он может принимать значения от 1 до infinite - бесконечно.
    Синтаксис :<IMG loop=значение>
  • start
    Этот атрибут задает условие начала воспроизведения клипа .Он может принимать значения fileopen - сразу после загрузки страницы и - mouseover после расположения указателя мыши над клипом .
    Синтаксис :<IMG start=значение>
Синтаксис :<IMG src=URL атрибуты >.

Примеры (208 kB) внедрения видео файлов в страницу.

Элемент <MAP>

Элемент <MAP> применяется для представления графического изображения ввиде карты с активными областями .Он поддерживает атрибут name ,который задает его имя , и включает внутри себя элемент <AREA> ,который и задает собственно активные области карты ,связанные ссылками с прочими ресурсами.
Синтаксис :<MAP name="имя"> <AREA атрибуты > </MAP>

Элемент <AREA>

Элемент <AREA> задает активные области карты ,щелчком по которым можно осуществить ссылку .Элемент не имеет конечного тэга .С изображениями карт удобно работать в стандартном приложении для Windows - редакторе Paint ,для него изображение должно быть трансформировано в формат BMP .Используя сетку в режимах увеличения нажатием Ctrl+G и выбрав инструмент Выделение ,когда указатель мыши принимает вид тонкого крестика ,координаты курсора можно определить с точностью до одного пиксела .Такая точность может очень пригодиться при задании координат активных областей карты .Элемент <AREA> поддерживает различные атрибуты :

  • href
    Этот атрибут указывает URL ссылки .
    Синтаксис <AREA href="URL">
  • alt
    Этот атрибут задает альтернативный текст для броузеров ,которые не поддерживают данный элемент .
    Синтаксис <AREA alt="текст подсказки">
  • shape
    Этот атрибут задает форму активной области на карте и её координаты ,он может принимать значения :"circle" coords=X,Y,R ,где X,Y,R - координаты центра круга и его радиус ,"poly" coords=X1,X2,X3... ,гдеX1,X2,X3... - координаты вершин многоугольника ,если многоугольник - прямоугольник ,то достаточно указать его верхнюю левую и правую нижнюю вершины "rect" coords=X1,X2,X3,X4.
    Синтаксис <AREA "circle" coords=X,Y,R>

Пример изображения - карты :

<IMG src="map.gif" usemap="#map.gif" border=0>
<MAP name="map.gif">
<AREA shape=circle coords="34,32,23" href="page1.html" alt="ссылка 1">
<AREA shape=poly coords="12,110,37,62,72,114" href="page2.html" alt="ссылка 2">
<AREA shape=rect coords="83,44,133,94" href="page3.html" alt="ссылка 3">
</MAP> 		ссылка 1 ссылка 2 ссылка 3

Элемент <BANNER>

Элемент <BANNER> позволяет зафиксировать какую-либо информацию на экране вне зависимости от того ,какая часть окна просматривается в данный момент.Данный элемент также редко поддерживается броузерами ,добиться же подобного решения можно при помощи фреймов.
Синтаксис :<BANNER>Текст или рисунок </BANNER>.

Пример :Текст выделенный элементом <BANNER>.

Элемент <BGSOUND>

Элемент <BGSOUND> используется для задания фонового звучания сразу же после загрузки страницы .Он может не имеет конечного тэга и может иметь атрибуты :

  • src
    Этот атрибут указывает URL звукового файла в формате WAV ,AU или MIDI.
    Синтаксис :< bgsound src= URL >.
  • loop
    Этот атрибут задает количество воспроизведений звукового файла .Он может принимать значения 1 или infinite - бесконечно.
    Синтаксис :<TR bgsound loop= значение >.

Пример задания фонового звучания .

Элемент <MARQUEE>

Элемент <MARQUEE> используется с целью создания в документе бегущей строки.Он может иметь атрибуты :

  • bgcolor
    Этот атрибут задает цвет фона бегущей строки .
    Синтаксис :<MARQUEE bgcolor="цвет">.
  • height
    Этот атрибут высоту бегущей строки в пикселах или процентах от всего окна.
    Синтаксис :<MARQUEE height=число>.
  • align
    Этот атрибут задает выравнивание бегущей строки по верхнему краю top ,по середине middle или по нижнему краю bottom.
    Синтаксис :<MARQUEE align= ...>.
  • direction
    Этот атрибут задает направление движения бегущей строки ,либо left в лево,либо right в право.
    Синтаксис :<MARQUEE direction="...">.
  • behavior
    Этот атрибут задает поведение бегущей строки ,либо scroll прокрутка ,либо slide прокрутка с остановкой,либо alternate движение от края к краю.
    Синтаксис :<MARQUEE behavior="...">.
  • hspace
    Этот атрибут задает смещение в пикселах в право бегущей строки .
    Синтаксис :<MARQUEE hspace=число>.
  • vspace
    Этот атрибут задает пустое пространство выше и ниже бегущей строки .
    Синтаксис :<MARQUEE vspace=число>.
  • loop
    Этот атрибут задает количество проходов бегущей строки .
    Синтаксис :<MARQUEE loop=число>.
  • scrollamount
    Этот атрибут задает скорость движения бегущей строки ,если его значение равно 1 ,то она будет еле ползти ,если его значение больше 10 ,то она будет двигаться очень быстро.
    Синтаксис :<MARQUEE scrollamount=число>.
  • scrolldelay
    Этот атрибут задает временной интервал между шагами бегущей строки ,с помощью него можно заставить строку двигаться рывками.
    Синтаксис :<MARQUEE scrolldelay=число>.

Синтаксис :<MARQUEE атрибуты> Текст строки </MARQUEE>.
Пример :Бегущаястрока заданая элементом
<MARQUEE hight=10 behavior="scroll">СТРОКА</MARQUEE"&>

СТРОКА

Элемент <APPLET>

Элемент <APPLET> используется для передачи компьютеру клиента программы - аплета ,которая загружается и выполняется броузером .Программы переданные броузеру существенно улучшают работу со страницей ,придавая ей интерактивность не свойственную страницам написанным без использования аплетов. Процесс внедренния состоит из двух этапов .Во-первых необходимо убедиться что все классы и связанные файлы ,такие как графические изображения и аудиофрагменты ,размещены в доступном каталоге - чаще всего это подкаталог classes каталога с документами HTML.Во-вторых ,в исходный код страницы должен быть внедрен тэг ссылки на классы <APPLET> ,а так же все необходимые для его работы параметры .Он можнт иметь атрибуты :

  • CLASS
    Этот атрибут указывает имя аплета.
  • SRC
    Этот атрибут указывает URL каталога ,в котором должен быть обнаружен откомпилированный аплет с символом / на конце .Ни в коем случае нельзя указывать само имя аплета т.к. оно названо атрибутом CLASS .
  • WIDTH
    Этот атрибут указывает ширину области вывода аплета в пикселах .
  • HEIGHT
    Этот атрибут указывает высоту области вывода аплета в пикселах .
  • ALIGN
    Этот атрибут указывает режим выравнивания аплета относительно текста ,принимает значения TOP,MIDDLE и BOTTOM.
Синтаксис :<APPLET class="имя.class" src="URL/" width="число" height="число" align="значение">
<PARAM NAME=имя параметра VALUE=его значение REF="адрес расположения объекта">

Пример внедрения в страницу аплета Java

Элемент <SCRIPT>.

Для придания документу дополнительных возможностей ,которые невозможно обеспечить с помощью стандартных элементов языка HTML,разработчики пользуются скриптовыми языками . Встраеваемые в документ обьекты придают ему динамичность , интерактивность ,позволяют управлять содержимым страницы уже после её загрузки. Элемент <SCRIPT> определяет язык сценариев,который используется в текущем документе обычно это либо Java Script ,либо Visual Basic Skript. Он может иметь атрибуты :

  • language
    Атрибут указывает язык ,который использовался при написании сценария.
    Синтаксис: <SKRIPT LANGUAGE ="язык">
  • src
    Атрибут задает URL файла с кодом сценария .
    Синтаксис: <SCRIPT src = URL>
Кроме того скрипты могут привязываться к определенным событиям :
  • onLoad
    Скрипт отрабатывается в момент загрузки страницы .
    Пример : Пример
  • onUnload
    Скрипт отрабатывается в момент ухода со страницы .
    Пример : Пример
  • onClick
    Скрипт отрабатывается в момент клика мыши в определенном месте .
    Пример : кликни здесь
  • onMouseOver
    Скрипт отрабатывается в момент наведения курсора мыши на определенный объект.
    Пример :
  • onMouseOut
    Скрипт отрабатывается в момент покидания курсором мыши определенного объекта.
    Пример :
  • onFocus
    Скрипт отрабатывается в момент , когда поле активизируется клавишей TAB.
    Пример кликните курсором в первом поле , а потом перейдите во второе клавишей TAB :
  • onBlur
    Скрипт отрабатывается в момент , когда поле теряет фокус.
    Пример кликните курсором в первом поле , а потом перейдите во второе клавишей TAB :
  • onSelect
    Скрипт отрабатывается в момент , когда в поле выбран текст .
    Пример :
  • onChange
    Скрипт отрабатывается в момент , когда поле теряет фокус , а данные в нем уже изменены .
    Пример измените содержимое первого поля , а затем перейдите ко второму полю клавишей TAB или курсором:
  • ondblclick
    Событие происходит при двойном щелчке на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример:
  • onmousedown
    Событие происходит при нажатии кнопки на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример :
  • onmouseup
    Событие происходит при отпускании кнопки на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример :
  • onmousemove
    Событие происходит при перемещении курсора, когда он находится на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример проведите курсором над текстом:
  • onkeypress
    Событие происходит при нажатии клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример укажите курсором на текст и нажмите на любую клавишу:
  • onkeydown
    Событие происходит при нажатии клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример укажите курсором на текст и нажмите на любую клавишу:
  • onkeyup
    Событие происходит при отпускании клавиши на элементе. Этот атрибут может использоваться с большинством элементов.
    Пример укажите курсором на текст и , нажав , отпустите любую клавишу:
    Пример :
  • onsubmit
    Событие происходит при отправке формы. Оно используется только в элементе FORM
  • onreset
    Событие происходит при сбросе формы. Оно используется только в элементе FORM

Существует другой способ применения элемента <SCRIPT>,когда тэг <SCRIPT> используется совместно с закрывающим тэгом </SCRIPT>, заключая в себе инструкции сценария.Если эту конструкцию поместить в заголовке , то сценарий будет запущен еще до того как загрузится документ. Сценарии, которые должны выполняться после загрузки документа или в результате действий пользователя , помещают в соответствующие формы или гиперссылки.
Синтаксис:<SCRIPT >инструкции сценария</SCRIPT>.
В случае неподдержания броузером языков сценариев инструкции сценария визуализируются на странице ввиде текста , скрыть его можно так :
Синтаксис:<SCRIPT ><!- -инструкции сценария //- - ></SCRIPT>.

Элемент <OBJECT>

Элемент <OBJECT> вставляет в документ графическое изображение ,видеоклип ,аплет JAVA или элемент управления ActiveX .Можно сказать что он пришел на смену элементу <APPLET> т.к. с помощью последнего можно вставить только лишь аплет Java .Единый для всех объектов и модулей элемент <OBJECT> функционально замещает элемент IMG и при необходимости может расширяться.Его атрибуты :

  • id
    Этот атрибут определяет идентификатор документа .
  • declare
    Этот атрибут позволяет подразумевать документ ,не создавая его .
  • classid
    Этот атрибут определяет URL идентификатора класса или экземпляра объекта .
  • codebase
    Этот атрибут определяет URL местоположения кода .
  • data
    Этот атрибут определяет URL ,который указывает на необходимые данные или объект .
  • type
    Этот атрибут обозначает тип содержимого Internet данных в соответствии с атрибутом DATA.
  • codetype
    Этот атрибут обозначает тип содержимого Internet данных в соответствии с атрибутом CLASSID.
  • standby
    Этот атрибут позволяет выводить окна с коротким сообщением в процессе загрузки объекта .
  • align
    Этот атрибут определяет режим выравнивания объекта относительно строки текущего текста или как отдельного элемента .
    Допустимые значения :
    • text-top
    • middle
    • textmiddle
    • baseline
    • textbottom
    • left
    • center
    • right
  • width
    Этот обязательный атрибут определяет ширину объекта в окне броузера .
  • height
    Этот обязательный атрибут определяет высоту объекта в окне броузера .
  • border
    Этот атрибут задает наличие или отсутсвие обрамления объекта при помощи значений 1 и 0 соответственно .
  • hspace
    Этот атрибут позволяет задать дополнительное пространство вокруг объекта .
  • vspace
    Этот атрибут позволяет задать дополнительное пространство вокруг объекта .
  • usemap
    Этот атрибут определяет URL объекта ,если тот является картой .
  • shapes
    Этот атрибут используется вместе с объектами ,которые обладают точками привязки или активными зонами .
  • name
    Этот атрибут используется с формами HTML ,которые могут содержать объект ,и определяет ,должен ли тот передавать данные серверу при запуске формы .
  • alt
    Этот атрибут определяет альтернативное содержимое ,которое будет визуализированно в случае ,если пользователь не может или не хочет отобразить объект .
  • title
    Этот атрибут определяет заголовок объекта .

Синтаксис:<OBJECT атрибуты>параметры и альтернативное содержание</OBJECT>.

Примеры (208 kB) внедрения в страницу при помощи <OBJECT> :

Элемент <EMBED>

Элемент <EMBED> является популярным расширением к языку HTML от Netscape пока он сам и его синтаксис не описанны в спецификации HTML 4.0 , но т.к. Microsoft обеспечила некоторую поддержку этого элемента своими броузерами , то довольно часто применяется при внедрении в страницы мультимедиа содержимого и других файлов . Официально для этих целей Консорциум W3C в спецификации HTML 4,0 рекомендует применять дескриптор <OBJECT> , однако Web-мастера довольно часто используют тэги <EMBED> и </EMBED> , и в зависимости от возможностей броузера элемент обрабатывается либо броузером , либо в специально запущенном приложении.
Синтаксис : <EMBED атрибуты> </EMBED>.
Элемент может поддерживать следующие атрибуты :

  • height задает вертикальный размер ,вставляемого обьекта
  • width задает горизонтальный размер ,вставляемого обьекта
  • autostart задает возможность запуска при загрузке, принимает значения true или false
  • loop задает количество повторений ,принимает значения true или false
  • hidden позволяет скрыть панель управления, принимает значения true или false
  • src указывает на URL мультимедиа файла
  • pluginspage указывает на URL плагина для проигрывания мультимедиа файла
  • bgcolor задает фон обьекта
  • type указывает на тип мультимедиа файла
  • quality указывает на качество мультимедиа файла
  • alt задает альтернативное содержание

Пример :
<EMBED src="file.swf" menu=true quality=high bgcolor=#000066 WIDTH=760
HEIGHT=410 TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
вставка обьекта ShockwaveFlash Пример

На стартовую
В оглавление
Наверх


Создание таблиц.

  • Элемент <TABLE>
  • Элемент <COL>
  • Элемент <COLGROUP>
  • Элемент <THEAD>
  • Элемент <TBODY>
  • Элемент <TFOOT>
  • Элемент <TR>
  • Элемент <CAPTION>
  • Элемент <TH>
  • Элемент <TD>
  • Примеры написания таблиц.

Элемент <TABLE>

Элемент <TABLE> используется с целью создания таблиц на Web странице.Они удобны тем ,что броузер сам прорисовывает рамку таблицы . Размер рамки может задаваться как фиксированно ,так и автоматически согласовываться с размерами окна просмотра броузера и с размерами ,находящегося в ячейках текста и рисунков.Кроме того таблицы позволяют решать чисто дизайнерские задачи : выравнивать части таблицы друг относительно друга ,размещать рядом рисунки и текст ,управлять цветовым оформлением , разбивать текст на колонки и т. д.При создании таблиц используется принцип вложения : между тэгами <TABLE> и </TABLE> задается заголовок вне рамки таблицы <CAPTION>,создается ряд элементов <TR>,определяющих начало строки ,а внутри этих элементов размещаются элементы <TD> ,описывающие ячейки и <TH> ,описывающие заглавные ячейки.

Элемент <TABLE> может иметь атрибуты :

  • bgcolor
    Этот атрибут задает фоновый цвет ячейкам ,которые не обладают собственным атрибутом bgcolor или background.
    Синтаксис :<TABLE bgcolor=цвет>
  • background
    Этот атрибут задает фоновый рисунок ячейкам ,которые не обладают собственным атрибутом bgcolor или background.
    Синтаксис :<TABLE background=URL файла изображения>
  • bordercolor
    Этот атрибут задает цвет рамки ,используется только с атрибутом border .
    Синтаксис :<TABLЕ border=число bordercolor=цвет >
  • bordercolorlight
    Этот атрибут задает цвет рамки ,используется только с атрибутом border .
    Синтаксис :<TABLE border=число bordercolorlight=цвет>
  • bordercolordark
    Этот атрибут задает цвет рамки ,используется только с атрибутом border .
    Синтаксис :<TABLE border=число bordercolordark=цвет>
  • align
    Этот атрибут задает задает режим горизонтального выравнивания таблицы на странице , он может принимать значения left , center и right .
    Синтаксис :<TABLE align= способ >.
  • width
    Этот атрибут задает ширину таблицы в пикселах или процентах от всего окна.
    Синтаксис :<TABLE width=число или %>.
  • border
    Этот атрибут задает ширину внешнего обрамления таблицы в пикселах .
    Синтаксис :<TABLE border=число >.
  • cellspacing
    Этот атрибут задает ширину внутреннего обрамления в пикселах .
    Синтаксис :<TABLE сellspacing=число >.
  • сellpadding
    Этот атрибут задает отступ между содержимым ячейки и обрамлением таблицы в пикселах .
    Синтаксис :<TABLE сellpadding=число >.
  • summary
    Этот необязательный атрибут задает краткое описание таблицы для некоторых броузеров.
    Синтаксис :<TABLE summary=описание >.
  • rules
    Этот атрибут задает линии между ячейками.
    Синтаксис :<TABLE rules=all >.
    • none
      Нет линий , значение используется по умолчанию.
    • groups
      Линии отображаются только между группами строк THEAD, TFOOT, и TBODY или группами столбцов COLGROUP и COL.
    • rows
      Линии отображаются только между строками.
    • cols
      Линии отображаются только между столбцами.
    • all
      Линии отображаются между строками и столбцами.
  • frame
    Этот атрибут задает Этот атрибут указывает, какие стороны кадра, окружающего таблицу, будут видимы.
    Синтаксис :<TABLE frame=void>.
    Возможные значения:
    • void
      Сторон нет. Это значение используется по умолчанию.
    • above
      Только верхняя часть.
    • below
      Только нижняя часть.
    • hsides
      Только верхняя и нижняя часть.
    • vsides
      Только левая и правая части.
    • lhs
      Только левая часть.
    • rhs
      Только права часть.
    • box
      Все четыре части.
    • border
      Все четыре части.
  • id
    Этот атрибут задает имя для ссылки .
    Синтаксис :<TABLE id=имя>.

Элемент <COL>

Элемент <COL> используется с целью задания колонок таблицы , может иметь атрибуты :

  • width
    Этот атрибут задает ширину ячеек в колонке .
    Синтаксис :<COL width=число>.
  • dgcolor
    Этот атрибут задает цвет фона ячеек.
    Синтаксис :<СOL bgcolor= цвет >.
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки , он может принимать значения left , center и right .
    Синтаксис :<TR align= способ >.
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки , он может принимать значения : middle - по середине и top - вверху.
    Синтаксис :<TR valign=значение>.
  • id
    Этот атрибут задает имя для ссылки .
    Синтаксис :<COL id=имя>.

Элемент <COLGROUP>

Элемент <COLGROUP> используется с целью задания групп колонок таблицы , может иметь атрибуты :

  • width
    Этот атрибут задает ширину ячеек .
    Синтаксис :<COL width=число>.
  • dgcolor
    Этот атрибут задает цвет фона ячеек.
    Синтаксис :<СOL bgcolor= цвет >.
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки , он может принимать значения left , center и right .
    Синтаксис :<TR align= способ >.
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки , он может принимать значения : middle - по середине и top - вверху.
    Синтаксис :<TR valign=значение>.
  • span
    Этот атрибут задает количество колонок в группе .
    Синтаксис :<COLGROUP span=число>.
  • width
    Этот атрибут задает ширину ячеек в колонках .
    Синтаксис :<COLGROUP width=число>.
  • id
    Этот атрибут задает имя для ссылки .
    Синтаксис :<COLGROUP id=имя>.

Элемент <THEAD>

Элемент <THEAD> используется с целью логического задания групп строк для верхней "шапки".
Синтаксис :<THEAD ><TR ><TD >...<TD >...</THEAD>.

  • dgcolor
    Этот атрибут задает цвет фона ячеек.
    Синтаксис :<СOL bgcolor= цвет >.
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки , он может принимать значения left , center и right .
    Синтаксис :<TR align= способ >.
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки , он может принимать значения : middle - по середине и top - вверху.
    Синтаксис :<TR valign=значение>.
  • id
    Этот атрибут задает имя для ссылки .
    Синтаксис :<THEAD id=имя>.

Элемент <TBODY>

Элемент <TBODY> используется с целью логического задания групп строк "тела" таблицы.
Синтаксис :<TBODY ><TR ><TD >...<TD >...</TBODY>.

  • dgcolor
    Этот атрибут задает цвет фона ячеек.
    Синтаксис :<СOL bgcolor= цвет >.
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки , он может принимать значения left , center и right .
    Синтаксис :<TR align= способ >.
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки , он может принимать значения : middle - по середине и top - вверху.
    Синтаксис :<TR valign=значение>.
  • id
    Этот атрибут задает имя для ссылки .
    Синтаксис :<TBODY id=имя>.

Элемент <TFOOT>

Элемент <TFOOT> используется с целью логического задания групп строк для нижней "шапки".
Синтаксис :<TFOOT ><TR ><TD >...<TD >...</THEAD>.

  • dgcolor
    Этот атрибут задает цвет фона ячеек.
    Синтаксис :<СOL bgcolor= цвет >.
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки , он может принимать значения left , center и right .
    Синтаксис :<TR align= способ >.
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки , он может принимать значения : middle - по середине и top - вверху.
    Синтаксис :<TR valign=значение>.
  • id
    Этот атрибут задает имя для ссылки .
    Синтаксис :<TFOOT id=имя>.

Начало строки : элемент <TR>

Элемент <TR> открывает строку определений ячеек и не требует конечного тэга ,хотя такой элемент можно использовать для наглядности обозначения каждой строки , поддерживает атрибуты , которые задают стиль оформления всех ячеек в строке .Отдельные ячейки могут быть отформатированы иначе .

  • dgcolor
    Этот атрибут задает цвет фона ячеек.
    Синтаксис :<TR bgcolor= цвет >.
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки , он может принимать значения left , center и right .
    Синтаксис :<TR align= способ >.
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки , он может принимать значения : middle - по середине и top - вверху.
    Синтаксис :<TR valign=значение>.
  • id
    Этот атрибут задает имя для ссылки .
    Синтаксис :<TR id=имя>.

Заголовок таблицы : элемент <CAPTION>

Элемент <CAPTION> задает заголовок вне рамки таблицы ,имеет атрибут align ,который может принимать значения top и bottom , left и right , а также id
- имя для ссылки .
Синтаксис <CAPTION> текст </CAPTION>

Ячейки заголовка : элемент <TH>

Элемент <TH> задает ячейку ,которая содержит заголовок , поддерживает атрибут id
- имя для ссылки . .
Синтаксис :<TH атрибуты > текст заголовка .

Ячейки с данными <TD>

Элемент <TD> определяет ячейку с данными

  • dgcolor
    Этот атрибут задает цвет фона ячейки.
    Синтаксис :<TD bgcolor= цвет >.
  • width
    Этот атрибут задает ширину ячейки в пикселах или %.
    Синтаксис :<TD width= число или % >.
  • heigt
    Этот атрибут задает высоту ячейки в пикселах.
    Синтаксис :<TD height=значение>.
  • rowspan
    Этот атрибут задает объединение соседних ячеек столбца в одну большего размера .При этом соседние ячейки не уничтожаются ,а лишь скрываются пока соседняя ячейка использует их пространство.
    Синтаксис :<TD rowspan=количество строк >.
  • colspan
    Этот атрибут задает объединение соседних ячеек строки в одну большего размера .При этом соседние ячейки не уничтожаются ,а лишь скрываются пока соседняя ячейка использует их пространство.
    Синтаксис :<TD colspan=количество колонок >.
  • align
    Этот атрибут задает режим горизонтального выравнивания содержимого внутри ячейки , он может принимать значения left , center и right .
    Синтаксис :<TD align= способ >.
  • valign
    Этот атрибут задает режим вертикального выравнивания содержимого внутри ячейки , он может принимать значения : middle - по середине и top - вверху.
    Синтаксис :<TD valign=значение>.
  • nowrap
    Этот атрибут блокирует автоматический перенос по словам в пределах ячейки в зависимости от других параметров таблицы .Аналогичного результата можно достичь при помощи замены обычных пробелов на неразрывнй мнемонический объект &nbsp;
  • id
    Этот атрибут задает имя для ссылки .
    Синтаксис :<TD id=имя>.

Исходные коды некоторых таблиц для примера.

<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </CAPTION>
<TR><TH bgcolor="white">Заголовок 1
<TH bgcolor="white">Заголовок 2
<TR><TD>Ячейка 1 <TD>Ячейка 2
<TR><TD>Ячейка 3 <TD>Ячейка 4
</TABLE>
Заголовок таблицы
Заголовок 1 | Заголовок 2
Ячейка 1 | Ячейка 2
Ячейка 3 | Ячейка 4
<TABLE border=4 cellspacing=3>
<CAPTION> Заголовок таблицы </caption>
<TR><TH bgcolor="white">
<TH bgcolor="white">Заголовок 1
<TH bgcolor="white">Заголовок 2
<TR<TH bgcolor="white">Заголовок 3
<TD>Ячейка 1
<TD>Ячейка 2
<TR><TH bgcolor="white">Заголовок 4
<TD>Ячейка 3
<TD>Ячейка 4
</table>
Заголовок таблицы
 | Заголовок 1 | Заголовок 2
Заголовок 3 | Ячейка 1 | Ячейка 2
Заголовок 4 | Ячейка 3 | Ячейка 4
<TABLE border=4 cellspacing=0 >
<CAPTION>Заголовок таблицы </caption>
<TR><TD bgcolor="white"><B>Заголовок 1</b>
<TD bgcolor="white"><B>Заголовок 2</b>
<TR><TD rowspan=3 bgcolor="white">Ячейка 1
<TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=2 bgcolor="white" align="center">Ячейка 5
</table>
Заголовок таблицы
Заголовок 1 | Заголовок 2
Ячейка 1 | Ячейка 2
 | Ячейка 3
 | Ячейка 4
Ячейка 5
<TABLE border=4 cellspacing=0 >
<TR><TD bgcolor="white"><B>Заголовок 1</b>
<TD bgcolor="white"><B>Заголовок 2</b>
<TD bgcolor="white"><B>Заголовок 3</b>
<TR><TD rowspan=4 colspan=2 bgcolor="white">Ячейка 1
<TR><TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=3 bgcolor="white" align="center">Ячейка 5
</table>
Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
<TABLE border=4 cellspacing=0>
<TR><TD bgcolor="white">Ячейка 1
<TD>
<TABLE border=2>
<TR><TD>Ячейка 2-1
<TD>Ячейка 2-2
<TR><TD>Ячейка 3-2
<TD>Ячейка 4-2
</table>
<TR><TD bgcolor="white">Ячейка 3-1
<TD bgcolor="white">Ячейка 4-1
</table>
Ячейка 1
Ячейка 2-1 | Ячейка 2-2
Ячейка 3-2 | Ячейка 4-2
Ячейка 3-1 Ячейка 4-1
<TABLE border=4 cellspacing=3 cellpadding=10>
<TR><TD bgcolor="white">Одна ячейка
</table>
Одна ячейка
<TABLE bgcolor="#0000ff" border="1"
align="center" rules="all" frame="box">
<COL width="100" bgcolor="#ffffff" align="center">
<COLGROUP span="3" width="50">
<CAPTION align="top">CAPTION</CAPTION>
<THEAD bgcolor="#ff0000">
<TR><TD><TD><TD><TD>
</THEAD>
<TFOOT bgcolor="#00ff00">
<TR><TD><TD><TD><TD>
</TFOOT>
<TBODY>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
<TR><TD><TD><TD><TD>
</TBODY>
</TABLE>
CAPTION
. | . | . | .
. | . | . | .
. | . | . | .
. | . | . | .
. | . | . | .
. | . | . | .
. | . | . | .


Создание форм HTML.

 На стартовую
В оглавление

Создание форм HTML.

Формы представляют собой наиболее важные интерактивные элементы HTML ,позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями.С их помощью пользователь может возвращать коментарии по поводу посещения определенного узла ,пересылать запросы или регистрироваться.Разработчик задает вопросы ,создавая форму , а пользователь отвечает на них заполняя её .Содержимое формы либо передаётся сценарию CGI ,либо по электронной почте посылается получателю .Сам процесс создания формы состоит из двух этапов.Первый заключается в создании самой формы ,а второй заключает в себе создание на сервере сценария CGI .Форма создается при помощи различных тэгов и атрибутов ,заключенных в пару <FORM></FORM>:

  • Элемент <FORM>.
  • Элемент <INPUT>.
  • Элемент <TEXTAREA>.
  • Элемент <SELECT>.
  • Элемент <OPTION>.
  • Элемент <OPTGROUP>.
  • Элемент <ISINDEX>.
  • Элемент <BUTTON>.
  • Элемент <LABEL>.
  • Элемент <FIELDSET>.
  • Элемент <LEGEND>.

Элемент<FORM>.

Элемент <FORM> является необходимым условием для всех форм .Он может иметь следующие атрибуты:

  • method
    Этот атрибут определяет способ пересылки данных сценарию CGI.Здесь протокол GET выбран по умолчанию ,но вбольшинстве случаев разработчики пользуются протоколом POST ,который позволяет передавать большие обьемы данных.
  • action
    Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.
  • enctype
    Этот атрибут определяет способ кодирования содержимого формы .Другими словами он сообщает броузеру о способе кодирования информации перед отсылкой серверу.По умолчанию используется значение x-www-form-encoded.
Синтаксис формы для сценария:<FORM method="get" или "post" action="URL сценария" ></FORM>

Синтаксис формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>

Элемент <INPUT>.

Элемент <INPUT> является базовым для всех элементов формы .Он используется для внедрения в форму кнопок ,графических изображений ,флажков ,переключателей ,паролей и текстовых полей .Несмотря на внешние отличия форм все они пересылают сценарию CGI данные ввиде пар имя:значение.Элемент может иметь восемь атрибутов обозначаемые как type :

  • TEXT
    Однострочное текстовое поле ,используется дла ввода информации ,которую нельзя ввести ни в одном из остальных элементов формы.Сюда вводятся имена ,адреса ,должности ,телефоны ,хобби , и данные практически любого типа.Элемент может иметь атрибуты:
    • maxlength . Задаёт максимально допустимую длину вписываемого значения в символах.
    • size . Задаёт максимально допустимую длину поля в символах.
    • value . Задаёт значение по умолчанию ,которое можно менять .
    Синтаксис :<INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Shopping">
    Пример :
  • PASSWORD
    Однострочное поле ,в котором вместо вводимых символов отображаются звездочки.Элемент может иметь атрибуты:
    • maxlength . Задаёт максимально допустимую длину вписываемого значения в символах.
    • size . Задаёт максимально допустимую длину поля в символах.
    • value . Задаёт значение по умолчанию ,которое можно менять .
    Синтаксис :<INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">
    Пример :
  • HIDDEN
    Еще один тип скрытого ввода информации .Позволяет пеоресылать сценариям информацию ,которая не может быть изменена пользователем.Некоторые прграммы CGI используют скрытые поля для передачи информации из одной страницы в другую ,например ,имя или номер .Такой подход существенно облегчает работу пользователя ,избавляя его от необходимости повторного ввода данных .
    Например для пересылки файла с исходным кодом HTML используется следующая конструкция :
    <INPUT type="HIDDEN" name="file" value="anyfile.html">
  • CHECKBOX
    Флажки используются для предоставления возможности пользователю ответить односложно :да/нет истина/ложь больше/меньше и т.д.Выглядит обычно ввиде крестика или птички .Элемент может иметь атрибуты:
    • checked .Задаёт начальный статус флажка по умолчанию .
    • value . Задаёт значение по умолчанию ,которое можно менять .
    Синтаксис :<INPUT type="checkbox" name="send_mail" value="yes" checked>
    Пример :
  • RADIO
    Переключатели во многом напоминают флажки ,отличаясь лишь более широкими функциональными возможностями выбора.В группе переключателей может быть выбран лишь один .Для каждого переключателя указывается отдельный Элемент INPUT .
    Пример :
    Visa <INPUT type="radio" name="payment_type" value="visa">
    Mastercard <INPUT type="radio" name="payment_type" value="mastercard">
    American Express <INPUT type="radio" name="payment_type" value="AmEx" checked>
    Visa Mastercard American Express
  • SUBMIT
    Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию ,который был задан атрибутом action в элементе <FORM> .C помощью кнопок можно вычислять сумму ,загружать стрницы ,пересылать данные ,сбрасывать значения .
    Синтаксис:<FORM method="get" или "post" action="mailto:name@domen.ru" >
    <INPUT type="submit" value="послать"></FORM>
    Пример :
  • RESET
    Кнопка используется для восстановления значений ,заданных по умолчанию .Если значение по умолчанию не предусмотренно ,то оно просто обнулится .Ширина кнопки может меняться в зависимости от других элементов.Имеет так же атрибут value.

    Синтаксис :<INPUT type="reset" value="очистка">

    Пример :

  • IMAGE
    Во многом похож на кнопку SUBMIT ,только в качестве кнопки используется изображение.Одним из преимуществ является возможность передачи координат щелчка пользователя ,что позволяет организовать карту изображений .Элемент может иметь атрибуты:
    • src . Задаёт URL файла с изображением.
    • align . Задаёт выравнивание изображения относительно текста при помощи значений TOP , MIDDLE и BOTTOM.
    • name . Задаёт имя карты которое так же пересылается сценарию вместе с координатами .

    Синтаксис :<INPUT type="image" src="knopka.gif">

    Пример :
  • BUTTON
    Создает другую кнопку , броузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.
    Синтаксис :<INPUT type="button"value="кнопка">

    Пример :
  • FILE
    Создает управляющий элемент выбор файла.
    Синтаксис :<INPUT type="file">

    Пример :
  • ACCESSKEY
    Задает кнопку , при нажатии которой происходит обработка поля.
    Синтаксис :<INPUT accesskey="a">

    Пример нажмите Alt+a:
  • ID
    Задает имя для ссылки.
    Синтаксис :<INPUT id="имя">
  • SIZE
    Задает ширину элемента в пикселях.
    Синтаксис :<INPUT size="число">
  • DISABLED
    Отключает возможность изменять содержимое поля или положение кнопки.
    Синтаксис :<INPUT disabled">
    Пример :

Элемент <TEXTAREA>.

Элемент <TEXTAREA> При помощи этого элемента создается область для ввода и прсмотра текста .Может использоваться и не в составе формы ,а как самостоятельные детали страницы .Область ввода помогает сэкономить место благодаря полосам прокрутки.Может иметь атрибуты:

  • name . Задаёт ключевое слово ,по которому сценарий может обращаться к его содержимому .
  • rows . Задаёт высоту области в строках.
  • cols . Задаёт ширину области в символах.

Синтаксис :<FORM><H3>Введи текст
<TEXTAREA name="ключевое слово" rows=5 cols=30>Область для ввода текста
</TEXTAREA></H3>
<INPUT type="reset" value="очистка"></FORM>

Пример :

Элемент <SELECT>.

Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов.Имеет вложенный тэг <OPTION> и атрибуты :

  • name . Задаёт имя.
  • size . Задаёт максимальное количество элементов списка ,одновременно отображаемых на экране.
  • multiple . Задаёт возможность одновременного выбора нескольких значений.

Элемент <OPTIONS>.

Элемент же <OPTIONS> задает возможные варианты выбора меню <SELECT>
Синтаксис :<OPTION value="n" selected>значение
имеет атрибуты:

  • selected . Задаёт изначально выбраное слово .
  • value . Задаёт значение выбраного слова для сценария.

Пример :<H3>Выбери нужное</H3>
<SELECT multiple>
<OPTION value=a>Первый</OPTION>
<OPTION value=b>Второй</OPTION>
<OPTION value=c>Третий</OPTION>
<OPTION value=d>Четвертый</OPTION>
</SELECT>

Выбери нужное

Пример : <SELECT size=1>
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</SELECT>

Элемент <OPTGROUP>.

ЭлементЭлемент <OPTGROUP> применяется для логической группировки элементов <OPTION> внутри тэга <SELECT> имеет атрибут label:

Синтаксис : <SELECT size=1>
<OPTGROUP label="Первая группа">
<OPTION selected value=1>Выберите:</OPTION>
<OPTION value=2> Первый</OPTION>
<OPTION value=3> Второй</OPTION>
</OPTGROUP>
<OPTGROUP label="Вторая группа">
<OPTION value=4>Третий</OPTION>
<OPTION value=5> Четвертый</OPTION>
</OPTGROUP>
</SELECT>

Элемент <ISINDEX>.

Элемент <ISINDEX>Это самый простой элемент ,позволяющий создать подобие формы и ввода строки ,содержащей текст и генерации запроса.

Пример : <ISINDEX prompt="Cтрока для ввода критерия поиска">

Допустим что на текущей странице задан базовый URL при помощи элемента
<BASE href="URL поискового средства в Internet">
тогда ,если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3,то броузер сформирует и отошлет запрос для поисковой машины сервера в виде:
http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +,поиск будет осуществлен .

Элемент <BUTTON>.

Элемент <BUTTON> является альтернативой элементу <INPUT> с более богатыми возможностями - например с заданием альтернативного текста .
Синтаксис :<BUTTON ><IMG src=...> </BUTTON>

  • name задает имя элементу .
  • value задает значение элементу .
  • type при использовании в качестве кнопки принимает значения : button , submit и reset .
  • disabled делает недоступным данный элемент
  • tabindex определяет положение в последовательности перехода клавишей Tab , отключенные поля форм не учавствуют в очередности.
  • accesskey задает клавишу доступа .
  • id задает имя для ссылки.

Пример : <BUTTON name="submit" type="submit">отправить</BUTTON >

Элемент <LABEL>.

Элемент <LABEL> применяется для альтернативного задания информации для управляющих полей формы .Поддерживает атрибут for , который связывает элемент <LABEL> с другим элементом формы , а значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента.
Пример :

<FORM action="URL" method="post">
<TABLE>
<TR>
<TD><LABEL for="fname">Имя</LABEL>
<TD><INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL for="lname">Фамилия</LABEL>
<TD><INPUT type="text" name="lastname" id="lname">
</TABLE>
</FORM>

Пример : <FORM action="URL" method="post">
<P>
<LABEL for="firstname">Имя: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Фамилия: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Мужской">Мужской<BR>
<INPUT type="radio" name="sex" value="Женский">Женский<BR>
<INPUT type="submit" value="Отправить"> <INPUT type="reset">
</P>
</FORM>

Мужской
Женский

Элемент <FIELDSET>.

Элемент <FIELDSET> позволяет логически группировать элементы формы .
Синтаксис :<FIELDSET> имя</FIELDSET>

Элемент <LEGEND>.

Элемент <LEGEND> позволяет давать наименования логическим группам элементов формы .
Синтаксис :<LEGEND> имя</LEGEND>

Пример :<FORM>
<FIELDSET>
<LEGEND>Группа 1</LEGEND>
<INPUT type="text" id="name1"><BR>
<INPUT type="text" id="name2"><BR>
</FIELDSET>
<FIELDSET>
<LEGEND>Группа 2</LEGEND>
<INPUT type="text" id="name3"><BR>
<INPUT type="text" id="name4"><BR>
</FIELDSET>
</FORM>

Группа 1

Группа 2

На стартовую
В оглавление
Наверх


Создание таблиц стилей.

Таблицы стилей используются для управления способом форматирования текста.К сожалению не все броузеры поддерживают в полной мере атрибуты таблиц стилей . Существует три вида таблиц стилей ,хотя некоторые разработчики успешно создают комбинации из стилей разных типов именно для решения сложных задач.Необходимо знать также то ,что если на странице со ссылкой на внешнюю таблицу определена внедренная таблица ,то последняя будет иметь более высокий приоритет ,хотя самый высокий приоритет имеют включенные стили. Такой метод позволяет обьединить самые лучшие качества таблиц стилей:

  • Включенные таблицы стилей
  • Внедренные таблицы стилей
  • Внешние таблицы стилей
  • Атрибуты стиля
  • Назначение классов
  • Примеры исходных кодов

Включенные таблицы стилей

Включенные таблицы стилей позволяют управлять отдельными страницами при помощи стандартных тэгов HTML в стандартном документе и определения конкретного стиля для содержимого конкретного контейнера.Для создания включенных стилей можно использовать как тэг <DIV> ,так и <SPAN>. Элемент <DIV> особенно удобно использовать для форматирования больших блоков текста ,тогда как <SPAN> оказывается более эффективным при определении стиля содержимого меньших обьёмов - фраз ,предложений или даже отдельных букв в словах.Сам по себе метод включения таблиц стилей в некотором смысле противоречит основной идее каскадных таблиц стилей.Так как ключевым моментом этой технологии является управление стилями отдельных страниц или узла целиком.Явное включение стилей аналогично использованию элемента <FONT> и должно применяться только в тех случаях ,когда необходимо определитбь стиль только небольшого фрагмента текста.

Внедренные таблицы стилей

Внедренные таблицы стилей позволяют управлять отдельными страницами при помощи пары тэгов <STYLE> и </STYLE>.Эта пара со всем её содержимым помещается между тэгами <HTML> и <BODY>. При написании кода внедренной таблицы выбираются тэги ,которые будут являться контейнерами текста .Действие таблицы стилей будет распространяться только на те фрагменты текста ,которые будут заключены именно в эти тэги.Точно также , как и скрипты , таблицы стилей могут быть спрятаны от старых броузеров в комментарии <!- - и //- -> . Внедренные таблицы используют наиболее часто .

Внешние таблицы стилей

Этот метод требует создания отдельного файла таблицы с основными стилями .Такой файл должен иметь расширение файл.css.Затем необходимо связать нужные документы сданной таблицей .Нужно поместить в связываемом документе где-нибудь между тэгами <HEAD> и </HEAD> следующую строку :
<LINK rel=stylesheet href="файл.css" type="text/css">

Все содержимое будет впредь форматироваться с помощью стилей заданных в таблице файл.css.Метод очень удобен для создания узлов страниц посвященных родственным темам или принадлежащих одному владельцу в едином хорошо продуманном и легко узнаваемом стиле.

Атрибуты стиля :

Атрибуты ,которые собственно и задают принципы оформления текста условно подразделяются на атрибуты стиля текста и атрибуты режимов выравнивания.Если первые оперируют такими понятиями как шрифт ,цвет ,размер ,насыщенность ,кегль и т.д. ,то последние создают поля ,отступы ,выравнивают по какому-либо краю ,задают фон или фоновый рисунок .

  • font-family
    Атрибут определяет тип шрифта по следующим элементам :
    • Название шрифта .
      Синтаксис : {font-family: Times}
    • Дополнительные шрифты . На случай ,если какой-нибудь из шрифтов не установлен.
      Синтаксис : {font-family: times,garamond,arial,hevletica}
    • Название семейства шрифтов .Serif-с засечками ,Sans Serif- без засечек ,Cursive- курсивные , Fantasy- декоративные ,Monospace- моноширинные .
      Синтаксис : {font-family: Serif}
  • font-size
    Атрибут определяет размер шрифта при помощи одной из размерностей :
    • Пункты .
      Синтаксис : {font-size: 12pt}
    • Дюймы .
      Синтаксис : {font-size: 12in}
    • Сантиметры .
      Синтаксис : {font-size: 12cm}
    • Пиксели .
      Синтаксис : {font-size: 12px}
    • Проценты .
      Синтаксис : {font-size: 50%}
    • Абсолют .
      Синтаксис : {font-size: small%}
      Может принимать значения :
      • xx-small
      • x-small
      • small
      • medium
      • large
      • x-large
      • xx-large
  • font-style
    . Атрибут определяет стиль начертания шрифта .
    Синтаксис : {font-style: italic}
    Может принимать значения :
    • italic
    • normal
    • oblique
  • font-variant
    . Атрибут определяет размер начертания шрифта .
    Синтаксис : {font-variant: normal}
    Может принимать значения :
    • small-caps
    • normal
  • font-weight
    . Атрибут определяет насыщенность начертания шрифта .
    Синтаксис : {font-weight: насыщенность}
    Может принимать значения :
    • normal .
      Синтаксис : {font-weight:normal}
    • bold .
      Синтаксис : {font-weight:bold}
    • число . Задается в пределах от 100 до 900 .
      Синтаксис : {font-weight:700}
    • Очень светлый .
      Синтаксис : {font-weight:extra-light}
    • Средне-светлый .
      Синтаксис : {font-weight:demi-light}
    • Светлый .
      Синтаксис : {font-weight: light}
    • Средний .
      Синтаксис : {font-weight: medium}
    • Очень жирный .
      Синтаксис : {font-weight: extra-bold}
    • Средн-жирный .
      Синтаксис : {font-weight: demi-bold}
    • Жирный .
      Синтаксис : {font-weight: bold}
  • word-spacing
    .Атрибут определяет оформление интервала между слов .
    Синтаксис : {word-spacing:тип}
    • normal .
      Синтаксис : {word-spacing:normal }
    • em .К обычному пробелу прибавляется ширина одной буквы m или нескольких
      Синтаксис : {word-spacing:3em }
  • text-decoration
    .Атрибут определяет оформление начертания шрифта .
    Синтаксис : {text-decoration:тип}
    • Упрощённый .
      Синтаксис : {text-decoration:none }
    • Подчеркнутый .
      Синтаксис : {text-decoration:underline }
    • Наклонный .
      Синтаксис : {text-decoration:italic }
    • Линия насквозь .
      Синтаксис : {text-decoration:line-through }
  • line-height
    . Атрибут определяет межстрочный интервал при помощи одной из пяти размерностей :
    • Пункты .
      Синтаксис : {line-heigh: 12pt}
    • Дюймы .
      Синтаксис : {line-heigh: 12in}
    • Сантиметры .
      Синтаксис : {line-heigh: 12cm}
    • Пиксели .
      Синтаксис : {line-heigh: 12px}
    • Проценты .
      Синтаксис : {line-heigh: 50%}
  • margin-left
    . Атрибут определяет отступ слева .
    Синтаксис : {margin-left:ширина}
    • Пункты .
      Синтаксис : {margin-left: 12pt}
    • Дюймы .
      Синтаксис : {margin-left: 12in}
    • Сантиметры .
      Синтаксис : {margin-left: 12cm}
    • Пиксели .
      Синтаксис : {margin-left: 12px}
  • margin-right
    . Атрибут определяет отступ справа .
    Синтаксис : {margin-right:число}
    • Пункты .
      Синтаксис : {margin-right: 12pt}
    • Дюймы .
      Синтаксис : {margin-right: 12in}
    • Сантиметры .
      Синтаксис : {margin-right: 12cm}
    • Пиксели .
      Синтаксис : {margin-right: 12px}
  • margin-top
    . Атрибут определяет отступ сверху.
    Синтаксис : {margin-top:число}
    • Пункты .
      Синтаксис : {margin-top:12pt}
    • Дюймы .
      Синтаксис : {margin-top:12in}
    • Сантиметры .
      Синтаксис : {margin-top:12cm}
    • Пиксели .
      Синтаксис : {margin-top:12px}
  • text-indent
    . Атрибут определяет отступ текста.
    Синтаксис : {text-indent:число}
    • Пункты .
      Синтаксис : {text-indent: 12pt}
    • Дюймы .
      Синтаксис : {text-indent:12in}
    • Сантиметры .
      Синтаксис : {text-indent:12cm}
    • Пиксели .
      Синтаксис : {text-indent:12px}
    Броузер Internet Explorer поддерживает отрицательные значения атрибутов полей и отступа .Эта функциональная особенность позволяет добиваться интересных и необычных эффектов ,что положительно сказывается на читабельности страницы .
  • text-align
    . Атрибут позволяет изменить режим выравнивания текста.
    Синтаксис : {text-align:расположение}
    • По правому краю .
      Синтаксис : {text-align:right }
    • По левому краю .
      Синтаксис : {text-align:left }
    • По центру .
      Синтаксис : {text-align:center }
    Выравнивание больших фрагментов по левому краю является единственно разумным решением с точки зрения читабельности .Выравнивание по правому краю логичнее всего назначать небольшим фрагментам текста , например ,выноскам .Хотя с помощью атрибута BODY определяются значения полей для всей страницы ,атрибут поля можно включать в любой элемент HTML ,например, в заголовки или абзацы .
  • background
    . Атрибут позволяет задать цвет фона страницы,присвоив ему шестнадцатеричное значение.
    Синтаксис : {background:#ffffff}
  • background-color
    . Атрибут позволяет задать цвет фона абзаца,присвоив ему шестнадцатеричное значение.
    Синтаксис : {background-color:#ffffff}
  • background
    . Атрибут позволяет задать фоновый рисунок страницы,указав его URL.
    Синтаксис : {background:URL}
  • color
    . Атрибут позволяет задать цвет текста страницы,присвоив ему шестнадцатеричное значение.
    Синтаксис : {color:#000000}
  • list-style-type
    .Атрибут определяет оформление маркеров в списках .
    Синтаксис : {list-style-type:тип}
    • disc .
      Синтаксис : {list-style-type: disc}
    • square .
      Синтаксис : {list-style-type: square}
    • circle .
      Синтаксис : {list-style-type: circle}
    • decimal .
      Синтаксис : {list-style-type: decimal}
    • lower-roman .
      Синтаксис : {list-style-type:lower-roman }
    • upper-roman .
      Синтаксис : {list-style-type: upper-roman}
    • lower-alpha .
      Синтаксис : {list-style-type: lower-alpha}
    • upper-alpha .
      Синтаксис : {list-style-type: upper-alpha}
    • none .
      Синтаксис : {list-style-type: none }
  • list-style-image
    .Атрибут определяет замену маркеров в списках на изображение.
    Синтаксис : {list-style-image:URL}
  • border-style
    .Атрибут определяет оформление рамок вокруг объектов .
    Синтаксис : {border-style:тип}
    • dotted .
      Синтаксис : {border-style: dotted}
    • solid .
      Синтаксис : {border-style: solid}
    • double .
      Синтаксис : {border-style: double}
    • groove .
      Синтаксис : {border-style: groove}
    • insert .
      Синтаксис : {border-style:insert }
    • ridge .
      Синтаксис : {border-style: ridge}
    • outset .
      Синтаксис : {border-style: outset}
    • none .
      Синтаксис : {border-style: none }
  • border-color
    .Атрибут определяет оформление цвета рамок вокруг объектов .
    Синтаксис : {border-color:цвет}
  • border-позиция
    .Атрибут определяет оформление вида и цвета рамок вокруг объектов выборочно с любой из сторон
    Синтаксис : {border-top:вид цвет}
    может принимать значения :
  • border-top
  • border-bottom
  • border-right
  • border-left
  • float
    .Атрибут аналогичен атрибуту align .
    Синтаксис : {float:left}

    Назначение классов

    Существуют дополнительные методы ,которые расширяют функциональные возможности таблиц стилей. Во-первых - таблицы можно сгруппировать ,что позволяет уменьшить количество необходимых атрибутов и аргументов ,путем создания логических групп. Во-вторых можно создать несколько вариантов - классов и применять их поочередно . Группирование таблиц стилей может происходить по одинаковым тэгам или по атрибутам одного семейства.Важно помнить ,что порядок атрибутов играет важную роль :насыщенность шрифта и стиль начертания должны находиться перед остальными атрибутами - кегль должен быть задан до межстрочного интервала - и только потом встроку можно добавить дополнительную информацию.В случае группирования атрибутов - между ними запятые не ставятся , исключение составляет атрибут семейства шрифта ,перед ним ставится запятая.Сгруппировав стили необходимо дать им названия ввиде расширения к элементу.
    Синтаксис :H1.left {text-align:left} или H1.right {text-align:right}

    В документе указывается либо <H1 class=left> либо <H1 class=right>.

    Примеры исходных кодов

    Группирование по тэгам
    До группирования После группирования
    H1 {font-family: arial;font-size: 14pt}
    H2 {font-family: arial;font-size: 14pt}
    H3 {font-family: arial;font-size: 14pt}
            H1,H2,H3 {font-family: arial;font-size: 14pt}
    Группирование по атрибутам одного семейства
    До группирования | После группирования
    BODY {font-family:arial,san-serif;font-size: 12pt;line-height: 14pt; font-weight:bold; font-style: normal} | BODY {font: bold normal 12pt/14pt arial,san-serif}
    BODY {margin-top: 12pt;margin-right: 10pt;margin-left: 15pt} | BODY {margin: 12pt 10pt 15pt}
    Пример включенной таблицы стилей
    <! DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 3.2 // EN “>
    <HTML>
    <HEAD>
    <TITLE> Пример включенной таблицы стилей</TITLE>
    </HEAD>
    <BODY>
    <P style="font: 24pt garamond">
    Включенная таблица стилей и атрибут style,включенный в тэг абзаца
    </P>
    <span style="font: 18pt arial">
    Стиль этого раздела был определен комбинацией тэга span и атрибута style
    </span>
    </BODY>
    </HTML>
    Пример внедренной таблицы стилей
    <! DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 3.2 // EN “>
    <HTML>
    <HEAD>
    <TITLE> Пример внедренной таблицы стилей</TITLE>
    </HEAD>
    <STYLE>
    BODY {background: #ffffff;color: #000000;margin-top: 120pt; margin-left: 150pt;margin-right: 100pt}
    H3 {font: 14pt verdana; color: #0000ff}
    P {font: 12pt times;background-color: #00ff00 ; text-indent: 0.5in}
    A {color: #ff0000}
    </STYLE>
    <BODY>
    <H3>Документ с внедренной таблицей стилей </H3>
    <P> В этом документе фон белый ,шрифт черный ;поля 150 пикселей ,120 и 100;</P>
    <P>Все заголовки третьего уровня будут выведены синим шрифтом Verdana высотой 14 пикселей. </P>
    <P>Абзацы простого текста оформлены красной строкой в 1/2 дюйма и выведены шрифтом Times высотой 12 пикселей . <A href="anyfile.htm">Ссылка</A>красного цвета </P>
    </BODY>
    </HTML>
    Пример внешней таблицы стилей
    Файл с расширением style.css Текст страницы .
    <STYLE>
    BODY {background:#ffffff;color #000000; margin-top: .25in}
    H3 {font: 14pt verdana; color: #0000ff}
    P {font: 12pt times; text-indent: 0.5in; margin-left: .75in; margin-right: .75in}
    A {color:#ff0000}
    </STYLE>         		<! DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 3.2 // EN “>
    <HTML>
    <HEAD>
    <TITLE> Пример внешней таблицы стилей</TITLE>
    <LINK rel=stylesheet href="Style.css" type="text/css">
    </HEAD>
    <BODY>
    <H3>Заголовок 14 пикселей Verdana синий</H3>
    <P>Абзац :шрифт 12 пикселей ,отступ текста 1/2 дюйма, выравнивание справа ислева 0,75 дюйма</P>
    <A href="anyfile.htm">Ссылка</A>красная
    </BODY>
    </HTML>

    На стартовую
    В оглавление
    Наверх


Создание WEB-узлов при помощи фреймов.

Использование <FRAME> позволяет помещать в окна одной страницы несколько отдельных страниц ,произвольно менять их размеры и организовывать изменение содержимого одного окна после выполнения пользователем действий в другом окне. Это позволяет использовать их в качестве инструмента навигации. Тэги <FRAMESET> и </FRAMESET> в данном случае заменяют тэги <BODY> и </BODY> соответственно.Внутри пары <FRAMESET> и </FRAMESET> могут быть использованы только тэги <FRAME>,<FRAMESET> и <NOFRAMES>. По сути создается несколько отдельных страниц фреймов,которые выводятся на экран одновременно ввиде нескольких окошек одного докумсента.Другими словами,прежде чем организовывать отдельные документы ввиде фреймов одного документа,необходимо прежде создать сами документы.Для пользователей ,чей броузер не поддерживает фреймы,необходимо создать альтернативный документ или сообщение о том, каким броузером нужно воспользоваться для прсмотра данного документа и заключить его в тэги <NOFRAME> и </NOFRAME>

  • Пара <FRAMESET> и </FRAMESET>
  • Использование <FRAME>
  • Использование <IFRAME>
  • Примеры простейших макетов страниц с фреймами .

Пара <FRAMESET> и </FRAMESET>

Тэги <FRAMESET> и </FRAMESET> позволяют задать относительный и абсолютный размеры фреймов ,<FRAMESET> может иметь атрибуты :

  • border
    Атрибут задает толщину обрамления в пикселах для всех производных фреймов.
    Синтаксис :<FRAMESET border="число" >
  • cols
    Атрибут задает количество и размер колонок в создаваемом наборе кадров в пикселах ,процентах или *пропорционально другим кадрам . Значения ширины различных кадров перечисляются в кавычках и через запятую .
    Синтаксис :<FRAMESET cols="число ,число* или % ">
  • rows
    Атрибут задает количество и размер строк в создаваемом наборе кадров в пикселах ,процентах или *пропорционально другим кадрам . Значения высоты различных кадров перечисляются в кавычках и через запятую .
    Синтаксис :<FRAMESET rows="число ,число* или % ">
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов .Значение 1 соответствует наличию , а 0 - отсутствию обрамления .
    Синтаксис :<FRAMESET frameborder="1 или 0" >

Использование <FRAME>

Элемент <FRAME> определяет содержимое заданных фреймов .Он может иметь атрибуты :

  • src
    Атрибут задает документ ,который должен быть отображен в фрейме.
    Синтаксис :<FRAME src="URL" >
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов .Может принимать значения Значение 1 соответствует наличию , а 0 - отсутствию обрамления .
    Синтаксис :<FRAME frameborder="1 или 0 ">
  • marginheight
    Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
    Синтаксис :<FRAME marginheight="число ">
  • marginwidth
    Атрибут задает толщину правого и левого обрамления в пикселах.
    Синтаксис :<FRAME marginwidth="число ">
  • name
    Атрибут задает любое имя фрейма , по которому можно будет обращаться к нему с помощью атрибута target в ссылках <A href>.Но существует четыре зарезервированных имени :
    1. blank
      Имя открывает в новом окне содержимое указанного URL .
    2. parent
      Имя открывает содержимое указанного URL в родительском , относительно текущего , фрейме .
    3. self
      Если так назвать фрейм ,то содержимое указанного URL заменит первоначально находившуюся в этом фрейме ссылку.
    4. top
      Имя отображает содержимое указанного URL в развёрнутом на всё окно фрейме.
  • noresize
    Атрибут лишает пользователя возможности изменить размеры текущего и смежного фреймов с помощью мыши .
    Синтаксис :<FRAME noresize >
  • scrolling
    Атрибут задает наличие у кадра полос прокрутки ,принимает значения YES , NO и AUTO .
    Синтаксис :<FRAME scrolling="значение ">

Использование <IFRAME>.

Этот тэг позволяет вставить в тело BODY окно , в котором визуализируется другая страница , при этом тэг IFRAME , , в отличие от тэга FRAME вставляется не между тэгами FRAMESET и /FRAMESET , а между тэгами BODY и /BODY

  • src
    Атрибут задает документ ,который должен быть отображен в фрейме.
    Синтаксис :<IFRAME src="URL" >
    .
  • frameborder
    Атрибут задает наличие или отсутствие обрамления у фреймов .Может принимать значения Значение 1 соответствует наличию , а 0 - отсутствию обрамления .
    Синтаксис :<IFRAME frameborder="1 или 0 ">
  • marginheight
    Атрибут задает толщину верхнего и нижнего обрамления в пикселах.
    Синтаксис :<IFRAME marginheight="число ">
  • marginwidth
    Атрибут задает толщину правого и левого обрамления в пикселах.
    Синтаксис :<IFRAME marginwidth="число ">
  • name
    Атрибут задает любое имя фрейма , по которому можно будет обращаться к нему в ссылках и направлять в него содержимое.
  • align
    Атрибут позволяет позиционировать кадр по отношению к тексту , принимает значения left , right , middle , top и bottom.
    Синтаксис :<IFRAME align="left" >
  • scrolling
    Атрибут задает наличие у кадра полос прокрутки ,принимает значения YES , NO и AUTO .
    Синтаксис :<FRAME scrolling="значение ">
  • width
    Атрибут определяет ширину кадра в пикселях.
    Синтаксис :<IFRAME width="число ">
  • height
    Атрибут определяет высоту кадра в пикселях.
    Синтаксис :<IFRAME height="число ">

Примеры простейших макетов страниц с фреймами .

Горизонтальное деление экрана производится при помощи атрибута rows ,а вертикальное при помощи атрибута cols.Значения атрибутов могут быть выражены в пикселах ,процентах или * для обозначения оставшейся части экрана .
Например :
cols=50%,50%
Деление области просмотра на равные ,правую и левую ,части .
Пример

cols=20%,80%
Деление области просмотра на неравные ,правую и левую ,части .
Пример

rows=100,20%,*
Деление области просмотра на три части :первой отведено 100 пикселей ,второй - 20% доступного пространства ,а третьей - все остальное .
Пример

cols=*,3*
Деление области просмотра на неравные ,правую и левую ,части .Правая часть в три раза шире левой .
Пример

cols=25%,75%
Деление области просмотра аналогично предыдущему примеру .
Пример

Пример исходного кода фреймов более сложной структуры.
<HTML>
<HEAD>
<TITLE>FRAMES</title>
</head>
<FRAMESET FRAMEBORDER=1 BORDER=2 ROWS=150,*>
<FRAME SKROLING="YES" NORESIZE SRC="page1.htm">
<FRAMESET FRAMEBORDER=1 BORDER=2 COLS=150,*>
<FRAME SKROLING="YES" NORESIZE SRC="page2.htm">
<FRAME FRAME SKROLING="YES" NORESIZE SRC="page3.htm">
</frameset>
</frameset>
</html>


WEB-мастер E-mail

Может случиться что Вы обнаружите какие-либо неточности , ошибки или у Вас появятся предложения и пожелания автору - воспользуйтесь этой формой для отправки сообщений. Пожалуйста заполните поля формы и постарайтесь не кликать дважды на кнопке "OK". Заполнять поля отмеченные знаком * - не обязательно.

* От кого:

* Обратный E-mail:


Пример "autobookmark".

При зазрузке этой страницы автоматически появляется диалоговое окно с предложением внести ее в папку избранное


Отправте другу ссылку на этот сайт.

Кому:

От кого:


Учeбноe пособиe по созданию Web-страниц ,справочник HTML с примeрами.

 Документ обновлен:

Сегодня:
Учебник HTML с примерами

Справочное пособие по созданию Web-страниц

проголосуйте за мой сайт!

Уважаемые господа !
Заранее приношу свои извинения т.к.сайт находится в стадии написания - поэтому структура изложения материала может быть частично пересмотрена , а некоторые примеры функционируют лишь в MS IE .

  • Немного истории ,перспективы развития языка HTML.
  • Введение к справочному пособию .
  • Структурные элементы документа HTML.
  • Практические советы по созданию Web-страниц.
  • Проблема чистоты языка HTML.
  • Тенденции развития языка HTML.
  • Практические советы по раскрутке Web-страниц.
  • Форма - генератор МЕТА-тэгов.
  • Отправте e-mail другу
  • Отправте e-mail Web-мастеру

Если хотите сделать эту страницу стартовой , жмите здесь [image] .
Если хотите занести эту страницу в "избранное" , жмите здесь [image] .

Если сочтете нужным разместить на своём сайте баннерик , жмите здесь .
Отправте другу ссылку на этот сайт , жмите здесь [image] или здесь


Учeбноe пособиe по созданию Web-страниц ,справочник HTML с примeрами.

 Документ обновлен:

Сегодня:
Учебник HTML с примерами

Справочное пособие по созданию Web-страниц

проголосуйте за мой сайт!

Уважаемые господа !
Заранее приношу свои извинения т.к.сайт находится в стадии написания - поэтому структура изложения материала может быть частично пересмотрена , а некоторые примеры функционируют лишь в MS IE .

  • Немного истории ,перспективы развития языка HTML.
  • Введение к справочному пособию .
  • Структурные элементы документа HTML.
  • Практические советы по созданию Web-страниц.
  • Проблема чистоты языка HTML.
  • Тенденции развития языка HTML.
  • Практические советы по раскрутке Web-страниц.
  • Форма - генератор МЕТА-тэгов.
  • Отправте e-mail другу
  • Отправте e-mail Web-мастеру

Если хотите сделать эту страницу стартовой , жмите здесь [image] .
Если хотите занести эту страницу в "избранное" , жмите здесь [image] .

Если сочтете нужным разместить на своём сайте баннерик , жмите здесь .
Отправте другу ссылку на этот сайт , жмите здесь [image] или здесь

 |  | TopList | ElVESTA-top |
MAFIA's Top100 | Член элитного клуба самых лучших сайтов Navigators-Internet! | Rank | Rambler's Top100 | Каталог Интернет ресурсов


PAGE 1


PAGE 2


PAGE 3


 Текст и прочие дескрипторы


 <! DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 3.2 // EN “>
<HTML>
<HEAD>
</HEAD>
<BODY>
<BGSOUND SRC="http://www.arcus.lv/dimas/m5.mid loop=infinite">
</BODY>
</HTML>


Пример включенной таблицы стилей

Включенная таблица стилей и атрибут style,включенный в тэг абзаца

Стиль этого раздела был определен комбинацией дескриптора span и атрибута style Ссылка


Пример внедренной таблицы стилей

Документ с внедренной таблицей стилей

В этом документе фон белый ,шрифт черный ;поля 150 пикселей ,120 и 100;

Все заголовки третьего уровня будут выведены синим шрифтом Verdana высотой 14 пикселей.

Абзацы простого текста оформлены красной строкой в 1/2 дюйма и выведены шрифтом Times высотой 12 пикселей . Ссылка красного цвета


Пример внешней таблицы стилей

Заголовок 14 пикселей Arial синий

Абзац : шрифт 12 пикселей ,отступ текста 1/2 дюйма,выравнивание справа и слева 0,75 дюйма

Ссылка красная.


Вставка в документ обьектов.

Файл воспроизводится при наведении курсора
<IMG dynsrc="http://www.arcus.lv/dimas/roma.mpg" start=mouseover>
Файл воспроизводится при загрузке один раз
<IMG dynsrc="http://www.arcus.lv/dimas/roma.mpg" start=fileopen>
Файл воспроизводится многократно
<IMG dynsrc="http://www.arcus.lv/dimas/roma.mpg" loop=infinite>


Вставка в документ аплетов.

Использование аплетов на Web -страницах позволяет добиваться интересных эффектов , которые стандартными средствами HTML , к сожалению , не возможно . В данном примере при нажатии левой кнопки мыши происходит замена рисунка на другой в том месте , где стоит курсор .

Сотрите верхний слой ...


Вставка в документ обьектов.

Вставка в страницу изображения , как альтернатива IMG
<OBJECT data="http://www.arcus.lv/dimas/roma.jpg"
type="image/jpeg" width=150 height=150></OBJECT>
Вставка в страницу кадра , и визуализация в нем другой страницы
<OBJECT data="http://www.arcus.lv/dimas/index.html"
type="text/html" width=200 height=150></OBJECT>
Файл воспроизводится с панели управления
( расширение от Netskape )
<EMBED src="http://www.arcus.lv/dimas/roma.mpg"></EMBED>
Файл воспроизводится с панели управления
<OBJECT data="http://www.arcus.lv/dimas/roma.mpg"
type="video/quicktime" width=160 height=155></OBJECT>


Пример JavaScript.

Закройте это окно


  • рисунок 1
  • рисунок 2
  • рисунок 3
  • рисунок 4
  • анимированный


Раскрутка Web-сайта в сети.

Если Вы не доверяете различным службам автодобавления , или всегда и все делаете сами - воспользуйтесь приведенным ниже списком каталогов для регистрации в них Вашего URL . Для большего удобства вы можете заранее заполнить поля нашей формы затем , чтобы потом просто скопировать их содержимое в соответствующие поля при регистрации - это несколько её ускорит . При регистрации не забывайте обращать внимание на такой важный пункт регистрации , как подписка Вас на получение новостей с сервера в дальнейшем - иногда это приводит к сильной перегрузке почты , когда почти одновременно приходят сообщения со всех серверов где Вы зарегистрировались .

Название Вашего сайта:
Напишите название, например : Справочник HTML для начинающих с примерами .

Автор страницы (редко):
Укажите имя или сетевой ник автора страницы :

URL Вашего сайта:
Укажите URL страницы :

Регион Вашего сайта (редко):
Укажите страну :

Ваш e-mail:
Укажите e-mail для контакта с автором страницы :

Ключевые слова для поиска Вашего сайта:
Здесь напишите список ключевых слов, для поиска сайта.

Краткое описание сайта:
Здесь опишите Ваш сайт - это описание посетитель увидит в каталоге рядом с именем и URL.

Практически все каталоги предлагают разместить на Вашем сайте свой баннер , подходите к этому обдуманно - часто в их код входят скрипты , а это притормаживает загрузку , да и просто арифметически подсчитайте на сколько дольше будет грузиться страница , если в среднем баннер с кодом занимают 3-5 kB .Размещайте у себя на сайте только те баннеры , которые являются одновременно еще и счетчиком посещений и , соответственно , влияют на Ваш рейтинг и приводят посетителей . Иногда администратор бывает против того , чтобы Вы изменяли предоставленный код , особенно что касается параметра target="_top" и alt="..." . Если же на это явно не указывается , то сделайте следующее :

  • Оптимизируйте изображение gif и храните его у себя , напимер в папке banners
    Пример :<IMG src=" Ваш URL/banners/super_katalog.gif">.

  • В код ссылки вставьте target="_top" это позволит Вам надеяться , что посетитель , кликнув на баннере не уйдет с сайта совсем .
  • Удалите из кода абсолютно никчемное Вам alt="..." .
  • Если код представляет из себя скрипт , то обязательно в нем будет присутствовать альтернативный код для тех , у кого скрипты отключены или не поддерживаются - выберите что-либо одно , а остальное удалите.

При регистрации помните о том , что в крупных каталогах Ваш сайт будет лишь одним из сотен ему подобных , а в маленьких и не раскрученных - в топе , хотя результат будет схожим . Ставку надо делать на золотую середину , особенно если они рассылают новости о пополнении каталога , имеют удобню систему поиска по категориям в каталоге и рейтинг с возможностью голосовать .Обязательно проверяйте путем пробного поиска - добавлен ли Ваш сайт в каталог , оцените насколько просто его будет там найти. Делайте это как при регистрации , так и периодически после , сообщая администратору о возникших проблемах - в противном случае у даляйте их баннер .

 | каталог | рейтинг | статистика | поиск | подписка
 | + | - | - | + | +
 | + | + | + | + | +
 | + | - | - | + | +
hi | + | + | - | + | -
 | + | - | - | - | +
 | + | + | - | + | -
 | + | - | - | - | -
 | + | + | + | + | -
 | + | - | - | + | -
 | + | - | - | - | -
 | + | + | + | + | -
 | + | + | - | + | +
 | + | + | - | + | -
 | + | - | - | + | -
 | + | + | - | - | -
 | + | + | - | + | -
 | + | + | - | + | +
 | + | + | - | + | +
 | + | - | - | - | -
 | + | + | - | + | -
SUPERTOP | + | + | + | - | -
 | + | + | + | + | +
 | + | + | + | + | -
 | + | - | - | + | +
 | + | + | - | + | -
 | + | - | - | + | +
 | + | - | - | + | -
 | + | - | - | + | -
 | + | - | - | + | +
 | + | + | + | + | -
 | + | - | - | + | -
 | + | - | - | - | +
 | + | - | - | - | -
 | + | + | - | + | +
 | + | + | - | + | -
 | + | - | - | - | -
 | + | - | - | + | +
 | + | - | - | + | +
 | + | - | - | + | -
 | + | - | - | + | -
 | + | - | - | + | -
 | + | + | - | + | -
 | + | - | - | + | -
 | + | - | - | + | -
 | + | + | - | + | +
 | + | + | + | + | -
 | + | + | + | + | -
 | + | - | - | + | -


Teleport Pro Messages

http://wall.tms.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://coder.com/creations/banner: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.updev.com/banners: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.crecon.com/banners.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://mediabuilder.com/abm.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://banner.ricor.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.bannerpoint.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.ir.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.reclama.net/banners: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://click.ipc.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://win.copirs.com/banner/default.ru.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.promote.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.reklama.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.linkexchange.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.flamingo2.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://tx3.design.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://road-to-riches.com/addalink2.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.123launch.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://hbb.nu/freesubmit/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.addme.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://u227.69.spylog.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.freecounter.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://beseen.com/beseen/free/counters.html: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.worldwidemart.com/scripts/counter.shtml: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.icount.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.fastcounter.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://runet.rsm.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.yandex.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.aport.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.hi.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.dir.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://url.linet.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://pingwin.net.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://1000stars.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://rusite.newmail.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.susanin.net/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://tanatos.adicom.ru/catalog: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.list.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.zabor.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.farpost.com/links: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://bookmarkz.virtualave.net/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.elvesta.kiev.ua/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.atrus.ru/rus/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.loner.sp.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://deftsite.agava.ru/index.htm: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.supertop.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://ivan.susanin.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://guide.citycat.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.ulitka.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.surok.wolf.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.diamondteam.ru/catalog: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.link.transit.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://ross.bankis.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://begemot.vr9.com/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://linksxx.da.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://search.centre.ru/cgi-bin/search/index.htm: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.webcross.newmail.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://weblist.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://yohoho.vostok.net/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://chirinsky.virtualave.net/index.htm: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://reflinks.da.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://goldenurl.radio.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.russia2you.org/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.09.open.by/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://zombi.agava.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.ranker.ru/: This file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.
http://www.arcus.lv/dimas/test.zip: This file was not retrieved by Teleport Pro, because it did not meet the project's file type specifications.
ftp://ftp.sausage.com/pub/hotdog/hotdog6/hotdog6install.exe: This file was not retrieved by Teleport Pro, because it did not meet the project's file type specifications.
http://www.arcus.lv/dimas/roma.mpg: This file was not retrieved by Teleport Pro, because it did not meet the project's file type specifications.
http://www.arcus.lv/dimas/dimas.swf: This file was not retrieved by Teleport Pro, because it did not meet the project's file type specifications.
http://www.arcus.lv/dimas/style.css: This file was not retrieved by Teleport Pro, because it is linked too far away from its Starting Address. If you increase the in-domain depth setting for the Starting Address, this file will be queued for retrieval.